Как поместить в div картинки разных размеров?

Размещение картинок разных размеров в контейнере

Это одна из частых задач в адаптивной верстке. Существует несколько проверенных подходов для управления изображениями разных размеров.

1. Object-Fit: Масштабирование с сохранением пропорций

Самый простой и надежный способ:

import Image from "next/image";

function ImageGallery() {
  return (
    <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
      <div className="relative w-full h-64 bg-gray-200 rounded-lg overflow-hidden">
        <Image
          src="/large-image.jpg"
          alt="Large image"
          fill
          className="object-cover"
        />
      </div>
      <div className="relative w-full h-40 bg-gray-200 rounded-lg overflow-hidden">
        <Image
          src="/small-image.jpg"
          alt="Small image"
          fill
          className="object-cover"
        />
      </div>
    </div>
  );
}

Свойства object-fit:

• cover - заполняет контейнер, может обрезать края
• contain - вся картинка видна, могут быть пустые области
• fill - растягивает картинку на весь контейнер
• scale-down - показывает картинку в оригинальном размере или меньше

2. Responsive Images с next/image

Next.js автоматически оптимизирует картинки для разных размеров экрана:

function ResponsiveImage() {
  return (
    <div className="w-full">
      <Image
        src="/responsive-image.jpg"
        alt="Responsive"
        width={1200}
        height={600}
        sizes="(max-width: 640px) 100vw,
               (max-width: 1024px) 80vw,
               1200px"
        className="w-full h-auto"
      />
    </div>
  );
}

Параметр sizes указывает, какой ширины картинка реально на разных экранах. Next.js автоматически подгружает нужное разрешение.

3. CSS Grid для галереи разных размеров

Для Pinterest-подобного макета:

function ImageGallery({ images }) {
  return (
    <div className="grid gap-4 grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
      {images.map((img) => (
        <div
          key={img.id}
          className={img.featured ? "col-span-2 row-span-2" : ""}
        >
          <div className="relative w-full h-48 rounded-lg overflow-hidden bg-gray-200">
            <Image
              src={img.src}
              alt={img.alt}
              fill
              className="object-cover hover:scale-105 transition"
            />
          </div>
        </div>
      ))}
    </div>
  );
}

4. Aspect Ratio для предсказуемых пропорций

Для сохранения пропорций без искажений:

function CardWithImage({ src, alt }) {
  return (
    <div className="bg-white rounded-lg overflow-hidden shadow">
      <div className="relative w-full aspect-video">
        <Image
          src={src}
          alt={alt}
          fill
          className="object-cover"
        />
      </div>
      <div className="p-4">
        <h3 className="font-bold">Card Title</h3>
        <p className="text-gray-600">Description</p>
      </div>
    </div>
  );
}

5. Lazy Loading и Placeholder

Для производительности:

function OptimizedImage({ src, alt }) {
  return (
    <Image
      src={src}
      alt={alt}
      width={800}
      height={400}
      placeholder="blur"
      blurDataURL="data:image/jpeg;base64,..."
      loading="lazy"
      className="w-full h-auto"
    />
  );
}

6. CSS Flex для выравнивания

Для простых случаев:

function ImageRow() {
  return (
    <div className="flex gap-4 items-stretch">
      <div className="flex-1 h-48 bg-gray-200 rounded-lg overflow-hidden">
        <Image
          src="/img1.jpg"
          alt="Image 1"
          width={400}
          height={300}
          className="w-full h-full object-cover"
        />
      </div>
      <div className="flex-1 h-48 bg-gray-200 rounded-lg overflow-hidden">
        <Image
          src="/img2.jpg"
          alt="Image 2"
          width={600}
          height={300}
          className="w-full h-full object-cover"
        />
      </div>
    </div>
  );
}

7. Контейнер с Fixed Ratio

Для видео или других медиа:

function ResponsiveVideo() {
  return (
    <div className="w-full" style={{ paddingBottom: "56.25%", position: "relative" }}>
      <Image
        src="/thumbnail.jpg"
        alt="Video thumbnail"
        fill
        className="object-cover"
      />
    </div>
  );
}

Best Practices

• Всегда используйте next/image вместо <img> - она автоматически оптимизирует
• Указывайте width и height для избежания layout shift
• Используйте object-cover для галерей и object-contain для контента
• Кэшируйте оптимизированные картинки на CDN
• Используйте sizes для адаптивных изображений
• Добавляйте loading="lazy" для картинок ниже fold

В PrepBro используем эти подходы для эффективного отображения картинок профессионалов, вопросов и интервью без проблем с производительностью.