Следить за новостями:

Категории
Свежие записи
BrainFБлог

Вписываем произвольное изображение в блок

«Какой же я идиот. Как я раньше до этого не додумался». Признайтесть, такая мысль посещала вас не раз и не два). Вот и у меня очередной приступ «самобичевания». При реализации галереи изображений с пред просмотром возникла задача вписать изображение в квадратный блок, сохранив при этом его пропорции. Раньше, для достижения этой цели, я задавал изображение как фон для блока и устанавливал значение contain для свойства background-size. Да и сейчас я буду так делать в зависимости от ситуации) Цель достигнута, но перфекционист внутри меня говорит о том что пострадала семантика. Что ж, в таком случае пойдем иным путем.

Итак, у нас имеется квадратный блок и изображение внутри него.

<div class="block">
    <img src="someimage.png">
</div>

Для того чтобы это изображение помещалось полностью либо в длину, либо в ширину блока, воспользуемся прямо для этого предназначенными свойствами CSS max-width и max-height (о которых верстальщики почему-то достаточно часто забывают).

.block {
    width: 200px;
    height: 200px;
}
.block img {
    max-width: 100%;
    max-height: 100%;
}

Теперь изображение занимает либо всю длину либо всю ширину блока. Добавим немного визуальной привлекательности выровняв изображение по центру.

.block {
    width: 200px;
    height: 200px;
    background: #383838;
    line-height: 200px;
    text-align: center;
}
.block img {
    max-width: 100%;
    max-height: 100%;
    vertical-align: middle;
}

Готово. Задача решена. Внутренний перфекционист молчит.
P.S. Возможное многим читателям статья покажется детским садом, а предложенный метод слишком очевидным. Но почему-то мне такое решение пришло в голову не сразу, а попытки гуглить показали что многие используют для достижения того же результата JavaScript.

Еще по теме

14 комментария к записи “Вписываем произвольное изображение в блок

  1. Сергей
    04.12.2014 12:12:21 Ответить

    А почему у вас «width: 200px;» повторяется 2 раза подряд? Может всё же одна из них «height: 200px;» ?

    1. parmactep
      04.12.2014 13:23:14 Ответить

      Да, действительно. Поправил. Спасибо.

  2. Елена
    23.01.2015 11:40:33 Ответить

    Не получается. Дайте, плиз, ссылку на песочницу с рабочим вариантом.

  3. Диана
    26.10.2015 14:05:50 Ответить

    спасибо! помогло!!!

  4. Павел Мелехов
    06.11.2015 21:55:00 Ответить

    В визуально более привлекательном примере по-прежнему два раза width: 200px.

    1. parmactep
      06.11.2015 22:28:42 Ответить

      Спасибо. Исправил.

  5. Алекс
    22.01.2016 21:21:33 Ответить

    Отлично! Ломал голову часа 2, а все так просто оказалось.

  6. Antique
    23.04.2016 12:47:21 Ответить

    Спасибо! Это круто!))

  7. Сергей
    19.09.2016 17:28:12 Ответить

    Однако это не работает, если блок произвольного размера. Тот же квадрат, но размеры его нам не известны. Как быть?

    1. parmactep
      05.02.2017 22:06:20 Ответить

      Извините за столь поздний ответ. Есть вариант с использованием псевдоэлементов. Если интересно — напишу об этом статью.

  8. Александр
    15.02.2017 12:05:44 Ответить

    Спасибо! Ваш пример очень помог!

Ваш комментарий
выберите имя