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

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

Ответ 1

Если я правильно понимаю, что вы хотите, вы можете оставить атрибуты ширины и высоты с изображения, чтобы сохранить соотношение сторон и использовать 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>

Ответ 2

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

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

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

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

Ответ 3

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

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

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

Подробнее о том, как работает свойство, см. статья CSS Tricks в object-fit для объяснения и демонстрации.

Ответ 4

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

img {    
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
}

Ответ 5

Все ответы ниже имеют фиксированную ширину и высоту, что делает решение "нечувствительным".

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

Внутри контейнера установите прозрачное изображение с желаемой пропорцией
Дайте тегу image inline 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;
}

Ответ 6

Вы можете добиться этого, используя свойства css flex. См. Код ниже

.img-container {
  width: 150px;
  height: 150px;
  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>

Ответ 7

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

Ответ 8

Попробуйте следующее:

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

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

Ответ 9

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

.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>

Ответ 10

Здесь у вас есть мой рабочий пример. Я использовал трюк, который устанавливает изображение в качестве фона контейнера div с фоном: обложка и фоновая позиция: центр центр

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

Обращаем ваше внимание, что я уверен, что я использую 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>

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

Ответ 11

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

<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%;
}

Ответ 12

Объект CSS object-fit: cover и object-position: left center значения свойств object-position: left center теперь относятся к этой проблеме.

Ответ 13

.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>

Ответ 14

Просто установите высоту изображения и укажите ширину = auto img {

height: 95vh;
width: auto;

}

Ответ 15

Нет, для этого не существует CSS3-единственного решения. Тем не менее, лучший ответ по вопросу, который вы связали, является второй лучшей.