Css img сохранить пропорции: Пропорции для img — dr.Brain

Пропорции для img — dr.Brain

В этом очень небольшом обзоре мы изучим, как установить соотношение сторон (пропорции) для изображения, размещаемого на HTML-странице. Для чего это нужно? К примеру, полученные знания будут полезны, если возникает необходимость уместить картинки различных размеров и пропорций в квадратный блок (или любой другой блок с четко определенными размерами и соотношением сторон), не искажая изображения.

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

Содержание

---

Изображение фиксированного размера

Если на страницу нужно вывести картинку заранее определенных размеров, можно воспользоваться атрибутами width и height.

Так как мы не знаем размеры и пропорции исходного изображения, применим CSS-свойство object-fit. Таким образом, мы сможем быть уверены, что картинка не деформируется.

HTML:

<img src="/path/to/image. jpeg" alt="">

CSS:

img {
    object-fit: cover;
}

Результат можно увидеть на нижеприведенной иллюстрации. Заметьте: исходное изображение имеет большую ширину, но оно не подверглось искажениям, вместо этого оно “обрезано” по центру:

object-fit: cover

Свойство object-fit принимает значения fill, contain, cover, none, scale-down. Подробно информацию можно изучить на сайте MDN.

Изображение нефиксированного размера

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

HTML:

<div>
    <img src="/media/desk.jpg" alt=""/>
</div>

CSS:

/* Position child elements relative to this element */
.aspect-ratio-box {
    position: relative;
}
/* Create a pseudo element that uses padding-bottom to take up space */
. aspect-ratio-box::after {
    display: block;
    content: '';
    /* 16:9 aspect ratio */
    padding-bottom: 56.25%;
}
/* Image is positioned absolutely relative to the parent element */
.aspect-ratio-box img {
    /* Image should match parent box size */
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

Приблизительно так будет выглядеть результат при соотношении сторон 16:9:

16:9

Свойство padding-bottom определяет высоту родительского контейнера, выраженную в процентах от его ширины. Например, при ширине блока 400px результирующая высота составит 56,25% от 400px, то есть около 225px.

Для того, чтобы определить нужное нам значение padding-bottom необходимо разделить высоту на ширину.

Например, при соотношении сторон 16:9, арифмитические манипуляции будут выглядеть так:

9 / 16 = 0.5625

Выразим результ в процентах (умножим полученное число на 100):

0.5625 * 100 = 56. 25

Результат: 56.25%

Вот и все.

Заключение

Мы научились выводить на HTML-изображение в различных пропорциях без деформации исходной картинки. Предложенные варианты работы с изображениями фиксированных и нефиксированных охватывают значительную часть стандартных ситуаций, возникающих при верстке.

Полезно прочитать

1. Как управлять размерами изображения с помощью CSS?
2. CSS. Магия отступов

Как сохранить пропорции изображения в адаптивном веб-дизайне

Рассмотрим типичный набор миниатюр изображений:

<ul> <li><a href="#"><img src="http://lorempixel.com/320/180/sports" /></a></li> <li><a href="#"><img src="http://lorempixel.com/320/180/city" /></a></li> <li><a href="#"><img src="http://lorempixel.com/352/198/technics" /></a></li> </ul> 

Мы можем показать эту галерею в любом размере в адаптивном шаблоне страницы, используя CSS (показаны основные свойства):

ul { width: 100%; padding: 0; margin: 0 0 2em 0; list-style-type: none; } li { float: left; width: 33. 3%; padding: 0; margin: 0; background-color: #000; border: 10px solid #fff; -moz-box-sizing: border-box; box-sizing: border-box; overflow: hidden; } li a { display: block; width: 100%; } img { display: block; max-width: 100%; } 

Это хорошо работает, потому что все наши изображения имеют одинаковое соотношение сторон 16: 9. Высота изображения составляет ровно 56,25% от ширины (9, деленное на 16, выраженное в процентах).

Однако мы, веб-дизайнеры, параноики: люди сговариваются против нас и предоставляют фотографии в бесконечном диапазоне размеров и соотношений сторон, например

<ul> <li><a href="#"><img src="http://lorempixel.com/320/180/sports" /></a></li> <li><a href="#"><img src="http://lorempixel.com/320/320/city" /></a></li> <li><a href="#"><img src="http://lorempixel.com/200/150/technics" /></a></li> </ul> 

Существуют различные решения этой проблемы:

1. Мы можем изменить размер каждого изображения вручную. Это отнимает много времени и утомительно.
2. Мы могли бы реализовать умное решение для автоматического изменения размера изображения на сервере. Это может занять некоторое время, и получающиеся изображения могут быть не такими полированными или оптимизированными, как нам нравится.
3. Мы могли бы устроить подобную диве истерику и отказаться работать в таких условиях. Конечно, это непрофессионально, и никто из нас не прибегнет к такой тактике (слишком часто).

Или мы можем использовать CSS для решения проблемы?

Мы можем, но это не так просто, как вы можете ожидать. В старые времена проектирования фиксированной ширины мы знали бы ширину нашего заполнителя изображения. Если бы это было 160px, мы могли бы сделать высоту 90px и рано уйти на пиво. В этом примере наша ширина составляет 33,3% от контейнера минус 20 пикселей для границы на левом и правом краях. Это может быть любой размер, поэтому установка фиксированной высоты будет препятствовать нашему требуемому соотношению сторон.

Малоизвестная особенность отступов заключается в том, что установка верхнего или нижнего процентного соотношения основывается на

ширине содержащего блока. Если ваш блок имеет ширину 100 пикселей, то padding-top: 30%; слой padding-top: 30%; будет равняться 30 пикселям. Я подозреваю, что это было сделано для облегчения вычислений рендеринга, поскольку высота элементов обычно определяется их содержимым. Кроме того, если у вас был родитель с фиксированной высотой 300px и установлен padding-top: 200%; на ребенке родитель становится размером не менее 600 пикселей, что приводит к рекурсивному каскаду, который разрушает сеть.

Безотносительно причины это очень полезно, так как это позволяет Вам установить внутреннее отношение, например

#element { position: relative; height: 0; padding: 56.25% 0 0 0; } 

Этот элемент будет сохранять соотношение 16: 9 в зависимости от ширины контейнера. Высота была установлена ​​в 0px, но, поскольку мы установили position: relative; Мы можем абсолютно позиционировать любой дочерний элемент.

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

li a { display: block; width: 100%; position: relative; height: 0; padding: 56.25% 0 0 0; overflow: hidden; } img { position: absolute; display: block; max-width: 100%; max-height: 100%; left: 0; right: 0; top: 0; bottom: 0; margin: auto; } 

Результат покажет изображение с черными полями, если оно не имеет соответствующего размера 16: 9:

Посмотреть код демонстрации …

Поиграйте с CSS. При удалении изображения max-width или max-height могут применяться эффекты обрезки, а не изменения размера. Я надеюсь, что вы найдете это полезным.

Если вам интересно узнать больше об адаптивном веб-дизайне, ознакомьтесь с нашей новой книгой Jump Start Responsive Web Design .

Это технология отредактирована Крейгом Баклером, автором этой статьи.

html — заставить изображение соответствовать размеру и сохранить соотношение сторон

Задавать вопрос

спросил 6 лет, 9 месяцев назад

Изменено 4 года, 1 месяц назад

Просмотрено 67 тысяч раз

Я хочу, чтобы изображение заполняло 100% ширины своего контейнера, и я хочу, чтобы для него было установлено свойство max-heigth, сохраняя при этом соотношение сторон, но позволяя потерять любую часть изображения.

 изображение {
   максимальная высота: 200 пикселей;
   ширина:100%;
}
 

Я знаю, что подобное можно сделать со свойством background-size , но я хочу сделать это со встроенным тегом .

Любая идея о том, как я могу добиться этого с помощью CSS? или джаваскрипт?

• HTML
• CSS

0

Вы можете попробовать CSS3 object-fit и увидеть поддержку браузера

таблицы .

CSS3 object-fit / object-position Метод определения того, как объект (изображение или видео) должен помещаться внутри его коробка. параметры объектной подгонки включают «содержать» (подгонка в соответствии с аспектом соотношение), «заливка» (растягивает объект до заполнения) и «обложка» (переполняет поле но сохраняет соотношение), где положение объекта позволяет объекту быть перемещается, как это делает background-image.

JSFIDDLE ДЕМО

 .контейнер {
  ширина: 200 пикселей; /*любого размера*/
  высота: 200 пикселей; /*любого размера*/
}

.object-fit-cover {
  ширина: 100%;
  высота: 100%;
  объект подходит: обложка; /*магия*/
} 

 <дел>
  

 .img-container {
  ширина: 150 пикселей;
  высота: 150 пикселей;
  граница: 2 пикселя сплошного красного цвета;
  выравнивание содержимого: по центру;
  дисплей: гибкий;
  flex-направление: строка;
  переполнение: скрыто;
  
}
.img-контейнер .img-to-fit {
  гибкий: 1;
  высота: 100%;
} 

 <дел>
  
 

 img {
    максимальная высота: 100%;
    максимальная ширина: 100%;
}
 

 div {
      фон: url(images/bg.jpg) фиксированный центр без повторов;
      -webkit-background-size: обложка;
      -moz-background-size: обложка;
      -o-background-size: обложка;
      размер фона: обложка;
}
 

 ширина: 300 пикселей; /* Ваша предпочтительная ширина */
высота: авто;
 

 ширина: авто;
высота: 300 пикселей; /* Ваша предпочтительная высота */
 

 .image-контейнер img {
  объект подходит: обложка;
}
 

 раздел {
  ширина: 100 пикселей;
  высота: 100 пикселей;
}

раздел > изображение {
  максимальная ширина: 100%;
  максимальная высота: 100%;
  объект-подгонка: уменьшение масштаба;
} 

 <дел>