[Перевод] Обрезка изображения с помощью свойства CSS object-fit

CSS

Оригинальная ссылка:Cropping Images in CSS With object-fit

Вы когда-нибудь хотели, чтобы изображение соответствовало точно определенному размеру, но в то же время сохраняло соотношение сторон и не сжимало изображение? Долгое время это было сложно сделать с помощью CSS. но сейчас object-fitНедвижимость может решить эту проблему!

Кроме inherit,initialа такжеunsetэти три значения,object-fitЕсть еще 5 возможных значений:

  • contain: сохраните исходное соотношение сторон изображения и измените размер изображения так, чтобы высота или ширина (в зависимости от того, что больше) соответствовали заданному размеру.
  • cover: сохранить исходное соотношение сторон изображения, и область изображения будет полностью закрыта изображением.
  • fill: По умолчанию. Изображение полностью заполняет область изображения, даже ценой потери исходного соотношения сторон.
  • none: Размер изображения не регулируется. Исходный размер изображения накладывается непосредственно на область изображения.
  • scale-down: в значенииcontain,noneслучае, меньший.

Ниже изображение, его исходный размер: ширина 1200px, высота 674px. Мы устанавливаем его для отображения в половинном размере, т.е. 600px * 337px.

Если вы не измените высоту, снова установите ширину на 300 пикселей. Затем исходное соотношение сторон изображения изменяется, и изображение кажется сплющенным по вертикали:

image.png

использовать object-fitможет решить эту проблему. Давайте взглянем.

object-fit: contain

image.png

Как видно из приведенного выше изображения, все изображение полностью содержится в области изображения.

object-fit: none

image.png

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

object-fit: cover

image.png

Слово «крышка» означает «крышка». см. вышеobject-fit: coverКонечный эффект рендеринга: полностью рендерится высота всей картинки, а соответствующая ширина (при сохранении исходного соотношения сторон) не может быть полностью отображена, отображается только средняя часть. Иными словами, так называемый эффект покрытия заключается в том, чтобы сторона с меньшей шириной и высотой изображения была полностью представлена ​​первой, а другая сторона была перехвачена и представлена.

object-fit: fill

image.png

object-fit: scale-down

image.png

Сравните значениеcontain,noneЭффект при , значениеcontain, размер рендеринга изображения меньше, поэтомуobject-fit: scale-downэффект презентации иobject-fit: containПоследовательный.

В этих примерахobject-fit: coverэто то, что мы ожидали лучше всего.

object-position

Теперь, допустим, картинка уже соответствует нашемуobject-fitНастройки обрезаны, но положение изображения не то, что вы хотите. В это время вы можете использоватьobject-positionсвойства для точного управления областью отображения изображения.

мы используемobject-fit: coverНапример:

.alligator-turtle {
  object-fit: cover;

  width: 300px;
  height: 337px;
}

Теперь мы изменим положение видимой части изображения по оси x, чтобы мы могли видеть крайнюю правую часть изображения:

.alligator-turtle {
  object-fit: cover;
  object-position: 100% 0;

  width: 300px;
  height: 337px;
}

image.png

Примечание переводчика:object-positionЗначение свойства по умолчанию равно50% 50%, поэтому обрезанное изображение, показанное выше, расположено по центру.

Наконец, давайте посмотрим, что произойдет, если будет предоставлено значение, выходящее за пределы:

.alligator-turtle {
  object-fit: cover;
  object-position: -20% 0;

  width: 300px;
  height: 337px;
}

GIF.gif

совместимость

image.png

(Конец текста)

коммерческое время(длительный эффект)

Моя хорошая знакомая владеет питомником, и я здесь, чтобы помочь ей распространить информацию. В питомниках теперь полно рэгдолл-котов. Если вы также любите кошек и нуждаетесь в этом, вы можете также отсканировать ее [Xianyu] QR-код. Неважно, если вы не купите его, просто взгляните.

(над)

Категории