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

Question

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

Есть идеи?

Answer 1

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

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

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

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

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

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

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

Answer 2

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

Answer 3

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

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

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

Answer 4

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

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

Answer 5

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

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

Answer 6

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

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

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

Answer 7

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

Answer 8

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

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

Answer 9

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

width: 100%;
height: auto;

Answer 10

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