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

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

Любые идеи?

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

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

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

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

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

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

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

Несколько лет спустя, в поисках того же требования, я нашел вариант 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

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

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

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

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

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

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

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

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

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

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

Один из ответов включает в себя 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/

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

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

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

width: 100%;
height: auto;

Это очень простое решение, которое я нашел после перехода по ссылке на 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); />

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

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

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

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

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

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

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

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

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

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

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

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

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