Я работаю с изображениями, и я столкнулся с проблемой с соотношением сторон.
<img src="big_image.jpg" width="900" height="600" alt="" />
Как видите, height
и width
уже указаны. Я добавил правило CSS для изображений:
img {
max-width:500px;
}
Но за big_image.jpg
, я получаю width=500
и height=600
. Как я могу настроить изображения для изменения размера, сохраняя при этом их пропорции.
css
image
aspect-ratio
moonvader
источник
источник
<img>
том, что само по себе включает в себя ширину и высоту, и я думаю, что это означает, что вам нужно использовать,!important
чтобы обойти информацию о ширине / высоте тега.!important
не нуженЯ довольно тяжело боролся с этой проблемой и в итоге пришел к такому простому решению:
Вы можете настроить ширину и высоту в соответствии со своими потребностями, и свойство object-fit подрежет вас.
Приветствия.
источник
object-fit
это фантастика, отличный совет! Есть несколько прекрасных библиотек polyfill, если кто-то интересуется совместимостью с IE.object-fit: contain
и указать ширину или высоту!Решения, приведенные ниже, позволят увеличить или уменьшить изображение в зависимости от ширины родительского блока.
Все изображения имеют родительский контейнер с фиксированной шириной только для демонстрационных целей . В производстве это будет ширина родительской рамки.
Лучшая практика (2018):
Это решение говорит браузеру визуализировать изображение с максимально доступной шириной и регулировать высоту в процентах от этой ширины.
Любимое решение:
С помощью более изящного решения вы сможете обрезать изображение независимо от его размера и добавить цвет фона для компенсации обрезки.
Для строки, задающей отступы, необходимо рассчитать соотношение сторон изображения, например:
Итак, верхний отступ = 34,37%.
источник
!important
, что здесь нужно.Свойство background-size имеет значение ie> = 9, но если вас это устраивает, вы можете использовать div с помощью
background-image
и установитьbackground-size: contain
:Теперь вы можете просто установить свой размер div на то, что вы хотите, и не только изображение сохранит свое соотношение сторон, оно также будет централизовано как по вертикали, так и по горизонтали внутри div. Только не забудьте установить размеры в css, так как у div нет атрибута width / height в самом теге.
Этот подход отличается от ответа setecs, при этом область изображения будет постоянной и задана вами (оставляя пустые места по горизонтали или по вертикали в зависимости от размера div и соотношения сторон изображения), в то время как ответ setecs даст вам коробку, которая точно размер масштабированного изображения (без пробелов).
Изменить: Согласно документации MDN background-size вы можете смоделировать свойство background-size в IE8, используя собственное объявление фильтра:
источник
Очень похоже на некоторые ответы здесь, но в моем случае у меня были изображения, которые иногда были выше, иногда больше.
Этот стиль работал как шарм, чтобы убедиться, что все изображения используют все доступное пространство, сохраняют соотношение, а не обрезы:
источник
object-fit
у меня работает работает ли он во всех браузерах?.img
класс на родителя или изображение? Не могли бы вы сделать jsfiddle с примером для портретных и пейзажных изображений?Удалите свойство «высота».
Указывая оба, вы меняете соотношение сторон изображения. Простая установка изменит размер, но сохранит соотношение сторон.
По желанию, чтобы ограничить превышения:
источник
height
атрибута вimg
теге является то, что браузер не может рассчитать, сколько места займет изображение, прежде чем загрузить изображение. Это замедляет рендеринг страницы и может привести к еще большему «скачку».Просто добавьте это к вашему CSS, он будет автоматически уменьшаться и расширяться при сохранении исходного соотношения.
источник
100%
вместо определенного значения в пикселях.display: block;
не нужноТам нет никакого стандартного способа , чтобы сохранить пропорции для изображений с
width
,height
иmax-width
указаны вместе.Поэтому мы вынуждены либо указывать
width
иheight
предотвращать «скачки» страниц при загрузке изображений, либо использоватьmax-width
и не указывать размеры для изображений.Указывать просто
width
(безheight
) обычно не имеет особого смысла, но вы можете попытаться переопределитьheight
атрибут HTML, добавив правило, подобноеIMG {height: auto; }
вашей таблице стилей.Смотрите также связанную ошибку Firefox 392261 .
источник
!important
в CSS. Это взлом, который в конечном итоге будет преследовать вас.!important
здесь.Вот решение:
Это будет гарантировать, что изображение всегда покрывает весь родительский элемент (масштабирование вверх и вниз) и сохраняет одинаковое соотношение сторон.
источник
Установите класс CSS вашего тега контейнера изображений
image-class
:и добавьте это вам свою таблицу стилей CSS.
источник
Чтобы сохранить отзывчивое изображение при сохранении определенного соотношения сторон, вы можете сделать следующее:
HTML:
И SCSS:
Это может использоваться для обеспечения определенного соотношения сторон, независимо от размера изображения, загружаемого авторами.
Спасибо @Kseso по адресу http://codepen.io/Kseso/pen/bfdhg . Проверьте этот URL для большего количества отношений и рабочего примера.
источник
border-radius
. Но, к сожалению, он обрезает изображение и не очень хорошо делает границы для изображения в div, насколько я пытался.Чтобы заставить изображение соответствовать точному размеру, вам не нужно писать слишком много кодов. Это так просто
источник
https://jsfiddle.net/sot2qgj6/3/
Вот ответ, если вы хотите поместить изображение с фиксированным процентом ширины , но не с фиксированным пикселем ширины .
И это будет полезно при работе с экранами разного размера .
Трюки
padding-top
чтобы установить высоту от ширины.position: absolute
чтобы поместить изображение в отступы.max-height and max-width
чтобы убедиться, что изображение не будет над родительским элементом.display:block and margin: auto
для центрирования изображения.Я также комментирую большинство хитростей внутри скрипки.
Я также нахожу некоторые другие способы сделать это. В html реального изображения не будет, поэтому я лично предпочитаю верхний ответ, когда мне нужен элемент img в html.
простой CSS с помощью фона http://jsfiddle.net/4660s79h/2/
фоновое изображение со словом сверху http://jsfiddle.net/4660s79h/1/
концепция использования абсолютного положения отсюда http://www.w3schools.com/howto/howto_css_aspect_ratio.asp
источник
Вы можете использовать это:
источник
Вы можете создать div следующим образом:
И используйте этот CSS для стилизации:
источник
Я бы посоветовал для адаптивного подхода лучше всего использовать единицы измерения Viewport и атрибуты min / max следующим образом:
источник
Это уменьшит изображение, если оно слишком велико для указанной области (как недостаток, оно не увеличит изображение).
Решение от setec отлично подходит для «Shrink to Fit» в автоматическом режиме. Но, чтобы оптимально РАСШИРЯТЬСЯ, чтобы уместиться в «автоматическом» режиме, вам нужно сначала поместить полученное изображение во временный идентификатор. Проверьте, можно ли увеличить его по высоте или ширине (в зависимости от соотношения сторон относительно соотношения сторон: ваш дисплейный блок),
Этот подход полезен, когда полученные изображения меньше, чем окно дисплея. Вы должны сохранить их на своем сервере в оригинальном небольшом размере, а не в расширенной версии, чтобы заполнить свой большой дисплей, чтобы сэкономить на размере и пропускной способности.
источник
источник
Как насчет использования псевдоэлемента для вертикального выравнивания? Этот код меньше для карусели, но я думаю, он работает на каждом контейнере фиксированного размера. Он сохранит соотношение сторон и вставит серо-темные полосы сверху / снизу или слева / для записи для кратчайшего измерения. В то же время изображение центрируется по горизонтали с помощью выравнивания текста и по вертикали с помощью псевдоэлемента.
источник
Полноэкранная презентация:
Имейте в виду, что если высота порта просмотра больше, чем изображение, изображение будет естественно ухудшаться относительно разницы.
источник
Я думаю, наконец, что это лучшее решение, легкое и простое :
источник