Масштабирование изображения CSS в соответствии с внутренним пространством не искажается

Есть ли способ с помощью CSS или иным образом сделать изображение вписывающимся в область. Допустим, у меня есть несколько изображений разных размеров, и я хочу, чтобы они все умещались в делении 150 на 100 пикселей. Я не хочу масштабировать изображения, хотя некоторые могут быть высокими, а другие узкими, я просто хочу, чтобы они вписывались в эту область, а остальные скрыты.

Я думал об использовании overflow:hidden, но он не скрыт в IE6.

Есть идеи?

Ответы

Ответ 1

Вы должны попробовать использовать это:

img{
  width: auto;
  max-width: 150px;
  height: auto;
  max-height: 100px;
}

Редактировать: похоже, что IE6 не поддерживает свойства max-width и max-height. Однако вы можете реализовать обходной путь, приведенный здесь: max-width, max-height для IE6

Выдержка (в случае, если связанная статья перестает работать):

img {
  max-height: 100px;
  max-width: 100px;
  width: expression(document.body.clientWidth > 150? '150px': 'auto');
  height: expression(document.body.clientHeight > 100? '100px': 'auto');
}

Ответ 2

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

Я мог бы интерпретировать, что вы ошибаетесь, но попробуйте это и посмотрите, создает ли он эффект, который вы ищете.

.img-holder {
  width: 150px;
  height: 150px;
  position: relative;
  overflow: hidden;
}
.img-holder img {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
}

<div class="img-holder">
  <img src="http://img.playit.pk/vi/dH6NIe7wm4I/mqdefault.jpg" />
</div>

Ответ 3

Это не будет работать в IE6 (в соответствии с требованиями OP), но для полноты вы можете добиться необходимого эффекта для новых браузеров с помощью CSS3 background-size:cover и установить изображение в виде фонового изображения в центре. Например:

div { 
  width:150px;
  height:100px;
  background-size:cover; 
  background-position:center center; 
  background-repeat:no-repeat; 
  background-image:url('somepic.jpg');
}

Ответ 4

Это сработало для меня:

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

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

JSFiddle: http://jsfiddle.net/4zudggou/

Ответ 5

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

Так как ответы были опубликованы, нам подобрано соответствие CSS-свойств объекта. Он делает именно то, что когда-то было запрошено в вопросе.

Для справки: https://www.w3schools.com/css/css3_object-fit.asp