CSS-масштабирование изображения, чтобы оно соответствовало области, не искажающей - PullRequest
Новая
       13

CSS-масштабирование изображения, чтобы оно соответствовало области, не искажающей

26 голосов
/ 20 марта 2011

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

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

Есть идеи?

Ответы [ 4 ]

34 голосов
/ 20 марта 2011

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

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”);
}
11 голосов
/ 07 июня 2013

Это не будет работать в 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');
}
11 голосов
/ 21 марта 2011

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

Возможно, я неверно истолковываю ваш вопрос, но попробуйте это и посмотрите, даст ли это эффект, который вы ищете. 

.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>
5 голосов
/ 06 марта 2015

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

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

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

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

...