Масштабирование изображения CSS, чтобы оно соответствовало области, а не искажалось

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

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

Любые идеи?


scale css overflow distortion
person RIK    schedule 20.03.2011    source источник
comment
Вы не хотите, чтобы они сохраняли соотношение сторон?   -  person Šime Vidas    schedule 20.03.2011

Ответы (6)


arrow_upward
39
arrow_downward

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

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

Изменить: похоже, что IE6 не поддерживает свойства 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”);
}
person Sang Suantak    schedule 20.03.2011
comment
Это просто неправильно. Как за это можно проголосовать 17 раз? Изображение явно масштабируется этим, и в исходном вопросе говорится, что лишняя часть должна быть скрыта. - person Torsten Bronger; 28.11.2014
comment
люди голосуют за ответ, потому что мы нашли вопрос в Google для немного другой вещи, и это просто работает для нашего случая;) - person robermorales; 05.12.2016

arrow_upward
13
arrow_downward

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

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

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

person Jimmy Cleveland    schedule 21.03.2011
comment
Да и нет. Я хотел бы, чтобы он масштабировал изображение до тех пор, пока высота ширины (которая когда-либо наступает раньше) не станет высотой контейнера, а затем обрезать остаток. - person RIK; 21.03.2011

arrow_upward
12
arrow_downward

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

div { 
  width:150px;
  height:100px;
  background-size:cover; 
  background-position:center center; 
  background-repeat:no-repeat; 
  background-image:url('somepic.jpg');
}
person Dan    schedule 07.06.2013
comment
Узнал что-то новое! Спасибо :-) - person Just Plain High; 24.07.2014
comment
Может быть, я был непослушным из-за того, что проголосовал за что-то, не протестировав это... Только что проверил. Прекрасно работает. - person Just Plain High; 24.07.2014
comment
-- Для меня это искажает изображение. -- О, подождите, на самом деле это не так! мое зрение было обмануто. - person donquixote; 14.09.2017

arrow_upward
10
arrow_downward

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

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

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

person Georgi Vatsov    schedule 07.10.2019
comment
Это идеально, ребята. Перейдите по ссылке и решите проблемы с искажением изображения. - person john; 14.09.2020

arrow_upward
5
arrow_downward

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

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

It tries to do a "perfect fit" of the container, stretching itself to fit the bounds while maintaining image proportion. Haven't tested it with IE6.

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

person Sheharyar    schedule 06.03.2015
comment
можно ли центрировать изображение с помощью этого метода? это было бы действительно круто. - person Darkhogg; 23.11.2015

arrow_upward
3
arrow_downward

Надеюсь, я не опоздал на вечеринку ;)

img {
      width:inherit;
      height:inherit;
      object-fit: cover;
}

однако, если вы хотите, чтобы отображалось полное изображение, используйте код ниже

img {
      width:inherit;
      height:inherit;
      object-fit: contain;
 }

это должно помочь.

person N Djel Okoye    schedule 10.11.2020