Я нашел эту ветку - Как вы растягиваете изображение, чтобы заполнить <div>, сохраняя при этом соотношение сторон изображения? - это не совсем то, что мне нужно.
У меня есть div определенного размера и изображение внутри него. Я хочу всегда заполнять div изображением, независимо от того, является ли изображение альбомным или портретным. И не имеет значения, обрезано ли изображение (в самом div скрыто переполнение).
Итак, если изображение портретное, я хочу, width
чтобы оно было 100%
таким, height:auto
чтобы оно оставалось пропорциональным. Если изображение альбомное, я хочу, height
чтобы оно было 100%
и width to be
авто`. Звучит сложно, правда?
<div class="container">
<img src="some-image.jpg" alt="Could be portrait or landscape"/>
</div>
Поскольку я не знаю, как это сделать, я просто создал быстрое представление о том, что я имею в виду. Я даже не могу это описать как следует.
Так что, думаю, я не первый, кто об этом спрашивает. Однако я не мог найти решение этого. Возможно, есть новый способ сделать это в CSS3 - я думаю о гибком боксе. Любая идея? Может, это даже проще, чем я ожидал?
источник
Ответы:
Если я правильно понимаю, что вы хотите, вы можете не указывать атрибуты ширины и высоты изображения для сохранения соотношения сторон и использовать flexbox для центрирования за вас.
JSFiddle здесь
Я успешно протестировал это в IE9, Chrome 31 и Opera 18. Но никакие другие браузеры не тестировались. Как всегда, вы должны учитывать ваши особые требования к поддержке.
источник
.fill img { min-height:100%; min-width: 100%; object-fit: cover; }
Немного поздно, но у меня была такая же проблема, и я, наконец, решил ее с помощью другого сообщения stackoverflow ( https://stackoverflow.com/a/29103071 ).
Надеюсь, это еще кому-то поможет.
Ps: Также работает вместе со свойствами css max-height , max-width , min-width и min-height . Это особенно удобно при использовании единиц длины, таких как 100% или 100vh / 100vw, для заполнения контейнера или всего окна браузера.
источник
object-position
здесь будет полезно добавить правило к этому классу. Просто примечание.Старый вопрос, но он заслуживает обновления, так как теперь есть способ.
Правильный ответ на основе CSS - использовать
object-fit: cover
, который работает какbackground-size: cover
. О позиционировании будет позаботитьсяobject-position
атрибут, который по умолчанию центрируется.Но он не поддерживается ни в каких браузерах IE / Edge или Android <4.4.4. Кроме того,
object-position
не поддерживается Safari, iOS или OSX. Полифиллы существуют, объекты подходят-изображения кажется, обеспечивают лучшую поддержку.Дополнительные сведения о том, как работает свойство, см. В статье CSS Tricks
object-fit
для объяснения и демонстрации.источник
Это должно сделать это:
источник
Все ответы ниже имеют фиксированную ширину и высоту, что делает решение «нереагирующим».
Чтобы добиться результата, но сохранить отзывчивость изображения, я использовал следующее:
HTML:
источник
Вы можете добиться этого, используя свойства CSS Flex. Пожалуйста, посмотрите код ниже
источник
Рассмотрите возможность использования
background-size: cover
(IE9 +) вместе сbackground-image
. Для IE8- есть полифилл .источник
background-size
имеет смысл только с указаниемbackground-image
(я соответствующим образом обновил свой ответ). Это не относится кIMG
элементам.Попробуй это:
Надеюсь это поможет
источник
Для этого вы можете использовать div. без тега img :) надеюсь, что это поможет.
источник
Единственный способ, которым я достиг описанного сценария «наилучшего случая», - это поместить изображение в качестве фона:
источник
Вот ответ с поддержкой использования IE,
object-fit
чтобы вы не потеряли соотношениеИспользуя простой фрагмент JS, чтобы определить
object-fit
, поддерживается ли он, а затем заменить егоimg
наsvg
Примечание. Есть также несколько
object-fit
полифиллов, которые сделаютobject-fit
.Вот несколько примеров:
источник
Вот мой рабочий пример. Я использовал трюк, который устанавливает изображение в качестве фона контейнера div с background-size: cover и background-position: center center
Я разместил изображение с шириной: 100% и непрозрачностью: 0, что сделало его невидимым. Обратите внимание, что я показываю свое изображение только потому, что меня особенно интересует вызов дочернего события щелчка.
Обратите внимание, что хотя я использую angular, это совершенно не имеет значения.
Результат - тот, который вы определяете как оптимальный во всех случаях.
источник
Значения CSS
object-fit: cover
иobject-position: left center
свойств теперь решают эту проблему.источник
источник
Просто исправьте высоту изображения и укажите width = auto
источник