Как сделать чтобы картинка не выпирала за закругленные края div?

Картинка с закругленными краями: правильная реализация

Это частая проблема при верстке - картинка часто "выпирает" за границы блока с border-radius. Вот несколько способов это исправить.

Способ 1: overflow hidden (самый простой)

Самый надёжный способ - добавить overflow: hidden на контейнер:

.image-container {
  width: 300px;
  height: 300px;
  border-radius: 16px;
  overflow: hidden; /* Главное свойство! */
  background-color: #f0f0f0;
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Чтобы картинка заполняла весь контейнер */
}

<div class="image-container">
  <img src="photo.jpg" alt="Photo">
</div>

Способ 2: С использованием Tailwind CSS

<!-- ✅ Самый простой способ в Tailwind -->
<div class="w-80 h-80 rounded-2xl overflow-hidden">
  <img src="photo.jpg" alt="Photo" class="w-full h-full object-cover">
</div>

<!-- Альтернатива с bg-cover -->
<div 
  class="w-80 h-80 rounded-2xl bg-cover bg-center" 
  style="background-image: url("photo.jpg")"
></div>

Способ 3: С position absolute (для более сложных случаев)

Если тебе нужен контроль над position картинки:

.image-wrapper {
  position: relative;
  width: 300px;
  height: 300px;
  border-radius: 16px;
  overflow: hidden; /* Обязательно! */
}

.image-wrapper img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  object-fit: cover;
}

<div class="image-wrapper">
  <img src="photo.jpg" alt="Photo">
</div>

Способ 4: Используя CSS mask (продвинутый метод)

Если overflow: hidden не подходит (например, нужна тень за картинкой):

.image-masked {
  width: 300px;
  height: 300px;
  border-radius: 16px;
  
  /* CSS mask создаёт маску вместо overflow */
  -webkit-mask-image: radial-gradient(
    circle,
    black 0%,
    black calc(100% - 16px),
    transparent 100%
  );
  mask-image: radial-gradient(
    circle,
    black 0%,
    black calc(100% - 16px),
    transparent 100%
  );
}

.image-masked img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

Способ 5: SVG маска (для сложных форм)

Если нужны нестандартные скруглённые края:

<svg style="display: none;">
  <defs>
    <mask id="rounded-mask">
      <rect width="300" height="300" fill="white" rx="16" ry="16"/>
    </mask>
  </defs>
</svg>

<div class="image-container">
  <img 
    src="photo.jpg" 
    alt="Photo" 
    style="mask: url(#rounded-mask); -webkit-mask: url(#rounded-mask);"
  >
</div>

Способ 6: React компонент с правильной реализацией

// components/RoundedImage.tsx
import React from "react";

interface RoundedImageProps {
  src: string;
  alt: string;
  borderRadius?: string;
  width?: string | number;
  height?: string | number;
  objectFit?: "cover" | "contain" | "fill";
  className?: string;
}

export function RoundedImage({
  src,
  alt,
  borderRadius = "16px",
  width = "300px",
  height = "300px",
  objectFit = "cover",
  className = "",
}: RoundedImageProps) {
  return (
    <div
      className={`overflow-hidden ${className}`}
      style={{
        width,
        height,
        borderRadius,
      }}
    >
      <img
        src={src}
        alt={alt}
        style={{
          width: "100%",
          height: "100%",
          objectFit,
          display: "block",
        }}
      />
    </div>
  );
}

// Использование
<RoundedImage 
  src="photo.jpg" 
  alt="Profile"
  borderRadius="12px"
  width="200px"
  height="200px"
/>

Способ 7: С box-shadow и border (для более сложного дизайна)

.image-card {
  position: relative;
  width: 300px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.image-card img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
}

/* Если картинка меньше контейнера */
.image-card img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

Важные моменты

1. Всегда используй display: block на картинке:

/* ❌ Плохо - img это inline элемент, создаёт отступ */
.container img {
  width: 100%;
}

/* ✅ Хорошо */
.container img {
  display: block;
  width: 100%;
}

2. Используй object-fit для контроля масштабирования:

img {
  width: 100%;
  height: 100%;
  
  /* cover - картинка заполняет контейнер, может обрезаться */
  object-fit: cover;
  
  /* contain - вся картинка видна, может быть пустое место */
  object-fit: contain;
  
  /* fill - растягивает картинку на весь контейнер */
  object-fit: fill;
}

3. Для фоновых картинок используй background-size:

.background-image {
  width: 300px;
  height: 300px;
  border-radius: 16px;
  background-image: url("photo.jpg");
  background-size: cover; /* Аналог object-fit: cover */
  background-position: center;
  overflow: hidden; /* На случай, если нужно совсем точно */
}

Проверочный чеклист

• Добавлен overflow: hidden на контейнер?
• Картинка имеет display: block?
• Используется width: 100% и height: 100%?
• Установлены border-radius на контейнер?
• Если нужен контроль обрезки - используется object-fit?

Самое простое и надёжное решение - overflow: hidden + object-fit: cover.