Как сделать картинку по размеру блока в css

Изменение размера изображения относительно блока

Плагины и Шаблоны для WordPress

В данном уроке покажу как сделать, чтобы при адаптивной верстке, когда ширина блока меняется, изображение, которое располагается в нем, изменяло свои размеры относительно блока. У меня был урок — Как растянуть фон на всю ширину блока, схожий с этим, но там изменялся фон блока. Тут же способ для изображения вставленного с помощью тега IMG.

Масштабирование изображения

Пример адаптивного масштабирования изображения относительно родительского блока, можете посмотреть в примере. Чтобы увидеть изменение изображения, просто измените размер окна, вашего браузера.

Пример

Плагины и Шаблоны для WordPress

Данный эффект осуществлен с помощью простого CSS. Если просто подключить изображение, то оно может выходить за пределы блок и это не совсем то что нужно, особенно, если блок меняет свой размер, то есть на сайте используется адаптивная верстка.

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

Для примера, блок будет иметь ширину 75% относительно экрана, картинка в нем будет занимать всю ширину и менять свой размер вместе с блоком.

У блока будут стили:

Картинке же присвоим максимальную ширину в процентах и автоматическое определение высоты. Высоту обязательно иначе, при уменьшении ширины блока, картинка будет менять свою ширину но не высоту и будет неправильной формы. Готовые стили будут примерно такими.

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

На этом все, спасибо за внимание. 🙂

Если Вам был полезным мой труд, можете финансово поддержать сайт или отключить блокировщик рекламы, что займет 2 минуты 🙂

Картинка по размеру блока

Часто возникает необходимость растянуть картинку по размеру блока с сохранением пропорций, чтобы изображение не искажалось. При этом результат бывает нужен разный. Иногда нужно обязательно заполнить всё пространство блока. А иногда важно отобразить всю картинку. Для этого в CSS есть свойство object-fit . Оно может иметь такие значения:

object-fit: fill — картинка просто заполняет блок без сохранения пропорций (по умолчанию)

object-fit: cover — картинка полностью заполняет всё пространство блока. Края изображения могут быть обрезаны из за того, что форма блока не совпадает с формой картинки.

object-fit: contain — вся картинка отображается в блоке. Часть блока может быть не заполнена из за того, что форма блока не совпадает с формой картинки.

object-fit: none — картинка отображается в своём реальном масштабе

object-fit: scale-down — соответствует либо contain либо none . Из этих вариантов выбирает тот, который меньше.

object-fit: initial — возвращает значение по умолчанию, если ранее изображению было установлено другое значение

Как в CSS вписать картинку (именно img) в блок?

Многие для вписывания картинки в блок используют background-image. Но есть один метод, который безболезненно и (почти) на всех браузерах поможет вам без лишних заморочек вписать img в div.

Делается этот хитрый трюк через padding-top и абсолютное позиционирование. Родительскому элементу указываем:

  1. height: 0;
  2. padding-top: 130%;
  3. position: relative;
  4. display: block;
  1. position: absolute;
  2. top: 50%;
  3. left: 50%;
  4. transform: translate(-50%, -50%);
  5. max-height: 100%;
  6. max-width: 100%;

В итоге картинка вытягивается по блоку с 0 высотой, а также изменяя padding-top (на 100% картинка вписывается в квадрат) мы можем изменять фигуру вписывания. А также можем через object-fit: cover сделать картинку замещаемой (но для ie11 нужно использовать полифил).

Результат на CodePen (правда там результат с object-fit: cover, но обратно превратить результат в вмещаемую картинку проще).

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *