Как я могу заполнить div изображением, сохраняя его пропорциональность?

120

Я нашел эту ветку - Как вы растягиваете изображение, чтобы заполнить <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 - я думаю о гибком боксе. Любая идея? Может, это даже проще, чем я ожидал?

матовый
источник
Почему вы хотите использовать css3, если вы все еще можете легко сделать это с помощью javascript? Go with js matey ..
GautamJeyaraman 03
1
Не проверено, но вы можете попробовать установить минимальную высоту и минимальную ширину на 100%? Это должно, по крайней мере, заполнить коробку и сохранить ее пропорции
chrisbulmer

Ответы:

149

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

.fill {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden
}
.fill img {
    flex-shrink: 0;
    min-width: 100%;
    min-height: 100%
}
<div class="fill">
    <img src="https://lorempizza.com/320/240" alt="" />
</div>

JSFiddle здесь

Я успешно протестировал это в IE9, Chrome 31 и Opera 18. Но никакие другие браузеры не тестировались. Как всегда, вы должны учитывать ваши особые требования к поддержке.

Isius
источник
В IE9 изображение не центрируется по вертикали или горизонтали с помощью этого метода, оно выравнивается по верхнему и левому краям. i59.tinypic.com/ouo77s.png
Майк Корменди,
1
У этого есть проблема на iPad, похоже, что safari растягивает изображение до 100% его высоты, но не сохраняет свойство min-width.
Шон
14
Кажется, что маленькие изображения увеличиваются до размера, но не до размера. По крайней мере, когда я использую большое изображение, оно показывает только крошечную его часть.
Johncl
12
Чтобы уменьшить масштаб большого изображения, я использовал следующее:.fill img { min-height:100%; min-width: 100%; object-fit: cover; }
Peter G
супер герой! : D
Гарис М. Суэро
48

Немного поздно, но у меня была такая же проблема, и я, наконец, решил ее с помощью другого сообщения stackoverflow ( https://stackoverflow.com/a/29103071 ).

.img {
   object-fit: cover;
   width: 50px;
   height: 100px;
}

Надеюсь, это еще кому-то поможет.

Ps: Также работает вместе со свойствами css max-height , max-width , min-width и min-height . Это особенно удобно при использовании единиц длины, таких как 100% или 100vh / 100vw, для заполнения контейнера или всего окна браузера.

Гермилтон
источник
это кроссбраузерное решение?
Candlejack
1
объект подходит: крышка; прекрасно работает! Информация о браузере (не работает в IE): css-tricks.com/almanac/properties/o/object-fit Резервное решение для IE: medium.com/@primozcigler/… MS работает над его реализацией: developer.microsoft.com / en-us / microsoft-edge / platform / status /…
Kaah,
Думаю, object-positionздесь будет полезно добавить правило к этому классу. Просто примечание.
Taha Paksu
8

Старый вопрос, но он заслуживает обновления, так как теперь есть способ.

Правильный ответ на основе CSS - использовать object-fit: cover, который работает как background-size: cover. О позиционировании будет позаботиться object-positionатрибут, который по умолчанию центрируется.

Но он не поддерживается ни в каких браузерах IE / Edge или Android <4.4.4. Кроме того, object-positionне поддерживается Safari, iOS или OSX. Полифиллы существуют, объекты подходят-изображения кажется, обеспечивают лучшую поддержку.

Дополнительные сведения о том, как работает свойство, см. В статье CSS Tricksobject-fit для объяснения и демонстрации.

холист
источник
8

Это должно сделать это:

img {    
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
}
maksim1
источник
У меня работает очень хорошо, в моем случае мне просто нужно было добавить position: absolute и top: 0, а также некоторый z-index
byroncorrales
7

Все ответы ниже имеют фиксированную ширину и высоту, что делает решение «нереагирующим».

Чтобы добиться результата, но сохранить отзывчивость изображения, я использовал следующее:

  1. Внутри контейнера разместите прозрачное изображение в формате gif с желаемой пропорцией.
  2. Дайте тегу изображения встроенный фон css с изображением, которое вы хотите изменить и обрезать

HTML:

<div class="container">
    <img style="background-image: url("https://i.imgur.com/XOmNCwY.jpg");" src="img/blank.gif">
</div> 


.container img{
   width: 100%;
   height: auto;
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center;
}​
Артур Классен
источник
Я использовал background-image для всего сайта моей компании-портфолио дизайнеров, чтобы иметь background-size: cover. Теперь мое SEO изображений испортилось, потому что фоновые изображения не распознаются Google. Хотел бы я закодировать это по-другому.
Alex Banman
5

Вы можете добиться этого, используя свойства CSS Flex. Пожалуйста, посмотрите код ниже

.img-container {
  border: 2px solid red;
  justify-content: center;
  display: flex;
  flex-direction: row;
  overflow: hidden;
  
}
.img-container .img-to-fit {
  flex: 1;
  height: 100%;
}
<div class="img-container">
  <img class="img-to-fit" src="https://images.pexels.com/photos/8633/nature-tree-green-pine.jpg" />
</div>

Сандип К. Наир
источник
1
Это работает ТОЛЬКО в том случае, если вы удалите свойства ширины и высоты, как указано в некоторых других ответах.
Чива
3

Рассмотрите возможность использования background-size: cover(IE9 +) вместе с background-image. Для IE8- есть полифилл .

Марат Таналин
источник
Разве для этого не нужен фоновый URL? Вы можете подробнее рассказать? Может ли это работать с <img src = "" />, как указано в вопросе?
harsimranb
@harsimranb Конечно, background-sizeимеет смысл только с указанием background-image(я соответствующим образом обновил свой ответ). Это не относится к IMGэлементам.
Марат Таналин
Это лучший ответ. Он прост и имеет хорошую поддержку браузером. Все остальные решения либо очень сложны, либо не работают в IE (9).
JoostS
1

Попробуй это:

img {
  position: relative;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  transform: translateX(-50%);
}

Надеюсь это поможет

Ландерквист
источник
1

Для этого вы можете использовать div. без тега img :) надеюсь, что это поможет.

.img{
	width:100px;
	height:100px;
	background-image:url('http://www.mandalas.com/mandala/htdocs/images/Lrg_image_Pages/Flowers/Large_Orange_Lotus_8.jpg');
	background-repeat:no-repeat;
	background-position:center center;
	border:1px solid red;
	background-size:cover;
}
.img1{
	width:100px;
	height:100px;
	background-image:url('https://images.freeimages.com/images/large-previews/9a4/large-pumpkin-1387927.jpg');
	background-repeat:no-repeat;
	background-position:center center;
	border:1px solid red;
	background-size:cover;
}
<div class="img">	
</div>
<div class="img1">	
</div>

Сивасактивел Калайарасу
источник
1

Единственный способ, которым я достиг описанного сценария «наилучшего случая», - это поместить изображение в качестве фона:

<div class="container"></div>
.container {
    width: 150px;
    height: 100px;
    background-image: url("http://i.stack.imgur.com/2OrtT.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}​
Дэвид Шуман
источник
1

Вот ответ с поддержкой использования IE, object-fitчтобы вы не потеряли соотношение

Используя простой фрагмент JS, чтобы определить object-fit, поддерживается ли он, а затем заменить его imgнаsvg

//for browsers which doesn't support object-fit (you can use babel to transpile to ES5)

if ('objectFit' in document.documentElement.style === false) {
  document.addEventListener('DOMContentLoaded', () => {
    Array.prototype.forEach.call(document.querySelectorAll('img[data-object-fit]'), image => {
      (image.runtimeStyle || image.style).background = `url("${image.src}") no-repeat 50%/${image.currentStyle ? image.currentStyle['object-fit'] : image.getAttribute('data-object-fit')}`
      image.src = `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='${image.width}' height='${image.height}'%3E%3C/svg%3E`
    })
  })
}
img {
  display: inline-flex;
  width: 175px;
  height: 175px;
  margin-right: 10px;
  border: 1px solid red
}

/*for browsers which support object fit */

[data-object-fit='cover'] {
  object-fit: cover
}

[data-object-fit='contain'] {
  object-fit: contain
}
<img data-object-fit='cover' src='//picsum.photos/1200/600' />
<img data-object-fit='contain' src='//picsum.photos/1200/600' />
<img src='//picsum.photos/1200/600' />


Примечание. Есть также несколько object-fitполифиллов, которые сделаютobject-fit .

Вот несколько примеров:

dippas
источник
0

Вот мой рабочий пример. Я использовал трюк, который устанавливает изображение в качестве фона контейнера div с background-size: cover и background-position: center center

Я разместил изображение с шириной: 100% и непрозрачностью: 0, что сделало его невидимым. Обратите внимание, что я показываю свое изображение только потому, что меня особенно интересует вызов дочернего события щелчка.

Обратите внимание, что хотя я использую angular, это совершенно не имеет значения.

<div class="foto-item" ng-style="{'background-image':'url('+foto.path+')'}">
    <img class="materialboxed" ng-class="foto.picid" ng-src="{{foto.path}}" style="opacity: 0;filter: alpha(opacity=0);" width="100%" onclick="$('.materialboxed')/>
 </div>
<style>
.foto-item {
height: 75% !important;
width: 100%;
position: absolute;
top: 0;
left: 0;
overflow:hidden;
background-size: cover;
background-position: center center;
}
</style>

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

Ноэль Туши
источник
0

Значения CSS object-fit: coverи object-position: left centerсвойств теперь решают эту проблему.

Обратный инжиниринг
источник
0

.image-wrapper{
    width: 100px;
    height: 100px;
    border: 1px solid #ddd;
}
.image-wrapper img {
    object-fit: contain;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
}
<div class="image-wrapper">
  <img src="">
</div>

Ясин
источник
-3

Просто исправьте высоту изображения и укажите width = auto

img{
    height: 95vh;
    width: auto;
}
Sarthak
источник