CSS: 100% ширина или высота при сохранении соотношения сторон?


174

В настоящее время с STYLE я могу использовать width: 100%и autoна высоте (или наоборот), но я все еще не могу ограничить изображение в определенной позиции, будь то слишком широким или слишком высоким, соответственно.

Любые идеи?


3
Вы можете опубликовать ссылку или скриншот, чтобы показать пример проблемы?
Мауро

Ответы:


138

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

Проблема в том, что изображение больше / выше, чем вы предпочитаете?

Вы можете поместить его в DIV, для которого установлена ​​максимальная высота / ширина, которую вы хотите для изображения, а затем установить переполнение: скрытый. Это обрезало бы все, что вы хотите.

Если изображение имеет ширину 100% и высоту: автоматически, и вы считаете, что оно слишком высокое, то именно потому, что сохраняется соотношение сторон. Вам нужно будет обрезать или изменить соотношение сторон.

Пожалуйста, предоставьте больше информации о том, чего вы конкретно пытаетесь достичь, и я постараюсь помочь вам больше!

--- РЕДАКТИРОВАТЬ НА ОСНОВЕ ОБРАТНОЙ СВЯЗИ ---

Вы знакомы со свойствами max-width и max-height ? Вы всегда можете установить их вместо этого. Если вы не установили минимальный уровень и не указали максимальную высоту и ширину, ваше изображение не будет искажено (соотношение сторон будет сохранено), и оно не будет больше, чем какой бы размер не был самым длинным и не достиг бы своего максимума.


16
если изображение выше, чем его ширина, я бы использовал height = 100% и width = auto, если изображение шире, чем оно высокое, я бы использовал width = 100%, height = auto. я просто никогда не знаю в чем дело? обрезка по максимальной высоте / ширине будет работать, но если есть способ не делать этого, я бы лучше использовал это ...
Уэстон Уотсон,

2
Ну, вы разрабатываете жидкостную или фиксированную компоновку? Если вы используете макет с фиксированной шириной, вы всегда можете установить ширину на 100%, и изображение будет масштабироваться соответствующим образом, но оно может быть очень высоким. Вы пытаетесь расположить изображение в текстовом блоке или используете его в качестве баннера или фона? Если бы вы могли показать страницу, на которой вы планируете ее использовать, или описать контекст, я мог бы вам больше помочь. Смотрите также изменения выше.
Андрей

использование max-height на моем img позволило мне ограничить изображения, сохраняя их пропорции
northamerican

2
object-fitбесполезно?
LeeGee

77

Несколько лет спустя, в поисках того же требования, я нашел вариант CSS с использованием background-size.

Он должен работать в современных браузерах (IE9 +).

<div id="container" style="background-image:url(myimage.png)">
</div>

И стиль:

#container
{
  width:  100px; /*or 70%, or what you want*/
  height: 200px; /*or 70%, or what you want*/
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

Ссылка: http://www.w3schools.com/cssref/css3_pr_background-size.asp

И демоверсия: http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size


3
идеальное решение, которое, к сожалению, не поддерживается IE8 :(
japrescott

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

58

Установив max-widthсвойство CSS в значение 100%, изображение будет заполнять ширину родительского элемента, но не будет отображаться больше, чем его фактический размер, сохраняя разрешение.

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

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

1
еще настраивается, heightчтобы auto
вызвать

42

Простое элегантное рабочее решение:

img {
  width: 600px;  /*width of parent container*/
  height: 350px; /*height of parent container*/
  object-fit: contain;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

3
Спасибо, что напомнили мне о object-fit. Именно то, что мне было нужно.
Эш Кларк

5
Это идеальное решение, но, к сожалению object-fit, не поддерживается ни в одной версии IE или Edge на 28 марта 2017 г.
Simon G

2
По состоянию на март 2019 года эта функция имеет 90% поддержки, так что это действительно следует считать правильным ответом.
Хампус Альгрен

Кроме того , обратите внимание , что object-fit: containи object-fit: coverне полюбите , widthкак 100% - вы должны использовать конкретные блоки , какpx
FlameStorm

Я попытался object-fitс max-widthи max-heightиспользуемый в других ответах, но это не сработало. это отлично работает для произвольных размеров изображений даже с widthиheight 100%
Halfacht

27

Была такая же проблема. Проблема для меня заключалась в том, что свойство height было уже определено в другом месте, исправлено так:

.img{
    max-width: 100%;
    max-height: 100%;
    height: inherit !important;
}

Именно то, что я искал. Спасибо миллион чувак.
Лондон Смит

Идеальный, где размер изображения может быть меньше или больше, чем родительский div, и он будет изменен в идеальный центр с максимальной шириной ИЛИ максимальной высотой. Вам не нужно использовать изображение в качестве фона, которое будет просто переполнять родительский элемент, если установлено «покрытие».
Рехмат

9

Простое решение:

min-height: 100%;
min-width: 100%;
width: auto;
height: auto;
margin: 0;
padding: 0;

Кстати, если вы хотите центрировать его в родительском контейнере div, вы можете добавить эти свойства css:

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

Это должно действительно работать, как и ожидалось :)


проголосовал за первую часть. вторая часть у меня не сработала ... :(
Викас

Только одна проблема - если изображение больше, чем 100% контейнера, оно выльется и потребует полос прокрутки или обрезки. Не уверен, как добиться того же самого и все же ограничить максимальный размер контейнера. Если установить максимальную ширину и высоту, он больше не сохраняет соотношение сторон.
JustAMartin

5

Один из ответов включает в себя background-size: instance css, который мне очень нравится, потому что это прямое изложение того, что вы хотите сделать, а браузер просто делает это.

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

Итак, предположим, что у вас есть контейнер, который реагирует, но имеет четко определенные границы для минимальной и максимальной ширины и высоты.

.photo {
  max-width: 150px;
  min-width: 75px;
  max-height: 150px;
  min-height: 75px;
}

И у контейнера есть img, который должен знать пиксели высоты контейнера, чтобы избежать получения очень высокого изображения, которое переполняется или обрезается.

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

.photo > img {
  max-width: 100%;
  max-height: 150px;
  -webkit-box-shadow: 0 0 13px 3px rgba(0,0,0,1);
  -moz-box-shadow:    0 0 13px 3px rgba(0,0,0,1);
  box-shadow:         0 0 13px 3px rgba(0,0,0,1);
}

Обратите внимание, что у него хорошая тень;)

Наслаждайтесь живым примером на этой скрипке: http://jsfiddle.net/pligor/gx8qthqL/2/


Ура - именно то, что я искал.
Илай

Спасибо за это решение и ссылку jsdfiddle. Это на самом деле сработало для моей реакции-галереи изображений, где я использую оба: изображения с большей высотой и изображения с большей шириной. :)
Eugenijus S.

4

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

img {
  max-width: 95%;
  max-height: 15em;
  width: auto !important;
}

3

Лучше всего использовать авто для измерения, которое должно учитывать соотношение сторон. Если вы не установите для другого свойства значение auto, большинство браузеров в настоящее время предполагают, что вы хотите соблюдать соотношение сторон, но не все (например, IE10 на Windows Phone 8 этого не делает)

width: 100%;
height: auto;

2

Это очень простое решение, которое я нашел после перехода по ссылке на conca и изучения размера фона. Это увеличивает изображение и затем помещает его по центру во внешний контейнер без масштабирования.

<style>
#cropcontainer
{
  width:  100%; 
  height: 100%; 
  background-size: 140%;
  background-position: center;
  background-repeat: no-repeat;
}
</style>

<div id="cropcontainer" style="background-image: url(yoururl); />

Хорошее и умное решение! С дополнительными 40% вы компенсируете соотношение сторон. Спасибо!
Саша

Вы также можете просто использовать, background-size: contain;чтобы поместить изображение в фон.
Саймон Дж.

1

Не прыгать в старую проблему, но ...

#container img {
      max-width:100%;
      height:auto !important;
}

Даже если это не правильно, так как вы используете переопределение! Important для высоты, если вы используете CMS, например WordPress, которая устанавливает для вас высоту и ширину, это работает хорошо.


1

В настоящее время можно использовать vwи vhблоки, которые представляют собой 1% против iewport - х ш IDþ и ч восемь соответственно.

https://css-tricks.com/fun-viewport-units/

Так, например:

img {
  max-width: 100vw;
  max-height: 100vh;
}

... сделает изображение максимально широким, сохраняя соотношение сторон, но не шире и не превышая 100% области просмотра.


0

Используйте JQuery или около того, так как CSS - это общее заблуждение (бесчисленные вопросы и обсуждения здесь о простых целях проектирования показывают это).

С помощью CSS невозможно сделать то, что вы хотите: у изображения должна быть ширина 100%, но если эта ширина приводит к слишком большой высоте, применяется максимальная высота - и, конечно, правильные пропорции должны быть сохранились.


-2

Я думаю, что это то, что вы искали, я искал это сам, но потом я вспомнил это снова, потому что я нашел код.

background-repeat: repeat-x;
background-position: top;
background-size:auto;
background-attachment: fixed;

цифровая эволюция уже в пути.

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.