Я работаю с изображениями, и я столкнулся с проблемой с соотношением сторон.

<img src="big_image.jpg" width="900" height="600" alt="" />

Как видите, heightи widthуже указаны. Я добавил правило CSS для изображений:

img {
  max-width:500px;
}

Но за big_image.jpg, я получаю width=500и height=600. Как я могу настроить изображения для изменения размера, сохраняя при этом их пропорции.

img {
  display: block;
  max-width:230px;
  max-height:95px;
  width: auto;
  height: auto;
}

<p>This image is originally 400x400 pixels, but should get resized by the CSS:</p>
<img width="400" height="400" src="http://i.stack.imgur.com/aEEkn.png">

Это уменьшит изображение, если оно слишком велико для указанной области (как недостаток, оно не увеличит изображение).

Я довольно тяжело боролся с этой проблемой и в итоге пришел к такому простому решению:

object-fit: cover;
width: 100%;
height: 250px;

Вы можете настроить ширину и высоту в соответствии со своими потребностями, и свойство object-fit подрежет вас.

Приветствия.

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

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

Лучшая практика (2018):

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

.parent {
  width: 100px;
}

img {
  display: block;
  width: 100%;
  height: auto;
}

<p>This image is originally 400x400 pixels, but should get resized by the CSS:</p>
<div class="parent">
  <img width="400" height="400" src="https://placehold.it/400x400">
</div>

Любимое решение:

С помощью более изящного решения вы сможете обрезать изображение независимо от его размера и добавить цвет фона для компенсации обрезки.

.parent {
  width: 100px;
}

.container {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  overflow: hidden;
  padding: 34.37% 0 0 0; /* 34.37% = 100 / (w / h) = 100 / (640 / 220) */
}

.container img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

<p>This image is originally 640x220, but should get resized by the CSS:</p>
<div class="parent">
  <div class="container">
    <img width="640" height="220" src="https://placehold.it/640x220">
  </div>
</div>

Для строки, задающей отступы, необходимо рассчитать соотношение сторон изображения, например:

640px (w) = 100%
220px (h) = ?

640/220 = 2.909
100/2.909 = 34.37%

Итак, верхний отступ = 34,37%.

Свойство background-size имеет значение ie> = 9, но если вас это устраивает, вы можете использовать div с помощью background-imageи установить background-size: contain:

div.image{
    background-image: url("your/url/here");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

Теперь вы можете просто установить свой размер div на то, что вы хотите, и не только изображение сохранит свое соотношение сторон, оно также будет централизовано как по вертикали, так и по горизонтали внутри div. Только не забудьте установить размеры в css, так как у div нет атрибута width / height в самом теге.

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

Изменить: Согласно документации MDN background-size вы можете смоделировать свойство background-size в IE8, используя собственное объявление фильтра:

Хотя Internet Explorer 8 не поддерживает свойство background-size, некоторые его функции можно эмулировать с помощью нестандартной функции -ms-filter:

-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='path_relative_to_the_HTML_file', sizingMethod='scale')";

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

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

.img {
   object-fit: contain;
   max-width: 100%;
   max-height: 100%;
   width: auto;
   height: auto;
}

Удалите свойство «высота».

<img src="big_image.jpg" width="900" alt=""/>

Указывая оба, вы меняете соотношение сторон изображения. Простая установка изменит размер, но сохранит соотношение сторон.

По желанию, чтобы ограничить превышения:

<img src="big_image.jpg" width="900" alt="" style="max-width:500px; height:auto; max-height:600px;"/>

Просто добавьте это к вашему CSS, он будет автоматически уменьшаться и расширяться при сохранении исходного соотношения.

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

Там нет никакого стандартного способа , чтобы сохранить пропорции для изображений с width, heightи max-widthуказаны вместе.

Поэтому мы вынуждены либо указывать widthи heightпредотвращать «скачки» страниц при загрузке изображений, либо использовать max-widthи не указывать размеры для изображений.

Указывать просто width(без height) обычно не имеет особого смысла, но вы можете попытаться переопределить heightатрибут HTML, добавив правило, подобное IMG {height: auto; }вашей таблице стилей.

Смотрите также связанную ошибку Firefox 392261 .

Вот решение:

img {
   width: 100%;
   height: auto;
   object-fit: cover;
}

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

Установите класс CSS вашего тега контейнера изображений image-class:

<div class="image-full"></div>

и добавьте это вам свою таблицу стилей CSS.

.image-full {
    background: url(...some image...) no-repeat;
    background-size: cover;
    background-position: center center;
}

Чтобы сохранить отзывчивое изображение при сохранении определенного соотношения сторон, вы можете сделать следующее:

HTML:

<div class="ratio2-1">
   <img src="../image.png" alt="image">
</div>

И SCSS:

.ratio2-1 {
  overflow: hidden;
  position: relative;

  &:before {
    content: '';
    display: block;
    padding-top: 50%; // ratio 2:1
  }

  img {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
  }
}

Это может использоваться для обеспечения определенного соотношения сторон, независимо от размера изображения, загружаемого авторами.

Спасибо @Kseso по адресу http://codepen.io/Kseso/pen/bfdhg . Проверьте этот URL для большего количества отношений и рабочего примера.

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

img{
    width: 200px;
    height: auto;
    object-fit: contain; /* Fit logo in the image size */
        -o-object-fit: contain; /* Fit logo fro opera browser */
    object-position: top; /* Set logo position */
        -o-object-position: top; /* Logo position for opera browser */
    }

<img src="http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png" alt="Logo">

https://jsfiddle.net/sot2qgj6/3/

Вот ответ, если вы хотите поместить изображение с фиксированным процентом ширины , но не с фиксированным пикселем ширины .

И это будет полезно при работе с экранами разного размера .

Трюки

1. Используя, padding-topчтобы установить высоту от ширины.
2. Использование, position: absoluteчтобы поместить изображение в отступы.
3. Использование, max-height and max-widthчтобы убедиться, что изображение не будет над родительским элементом.
4. используя display:block and margin: autoдля центрирования изображения.

Я также комментирую большинство хитростей внутри скрипки.

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

простой CSS с помощью фона http://jsfiddle.net/4660s79h/2/

фоновое изображение со словом сверху http://jsfiddle.net/4660s79h/1/

концепция использования абсолютного положения отсюда http://www.w3schools.com/howto/howto_css_aspect_ratio.asp

Вы можете использовать это:

img { 
    width: 500px; 
    height: 600px; 
    object-fit: contain; 
    position: relative; 
    top: 50%; 
    transform: translateY(-50%); 
}

Вы можете создать div следующим образом:

<div class="image" style="background-image:url('/to/your/image')"></div>

И используйте этот CSS для стилизации:

height: 100%;
width: 100%;
background-position: center center;
background-repeat: no-repeat;
background-size: contain; // this can also be cover

Я бы посоветовал для адаптивного подхода лучше всего использовать единицы измерения Viewport и атрибуты min / max следующим образом:

img{
  display: block;
  width: 12vw;
  height:12vw;
  max-width:100%;
  min-width:100px;
  min-height:100px;
  object-fit:contain;
}

Это уменьшит изображение, если оно слишком велико для указанной области (как недостаток, оно не увеличит изображение).

Решение от setec отлично подходит для «Shrink to Fit» в автоматическом режиме. Но, чтобы оптимально РАСШИРЯТЬСЯ, чтобы уместиться в «автоматическом» режиме, вам нужно сначала поместить полученное изображение во временный идентификатор. Проверьте, можно ли увеличить его по высоте или ширине (в зависимости от соотношения сторон относительно соотношения сторон: ваш дисплейный блок),

$(".temp_image").attr("src","str.jpg" ).load(function() { 
    // callback to get actual size of received image 

    // define to expand image in Height 
    if(($(".temp_image").height() / $(".temp_image").width()) > display_aspect_ratio ) {
        $(".image").css('height', max_height_of_box);
        $(".image").css('width',' auto');
    } else { 
        // define to expand image in Width
        $(".image").css('width' ,max_width_of_box);
        $(".image").css('height','auto');
    }
    //Finally put the image to Completely Fill the display area while maintaining aspect ratio.
    $(".image").attr("src","str.jpg");
});

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

Как насчет использования псевдоэлемента для вертикального выравнивания? Этот код меньше для карусели, но я думаю, он работает на каждом контейнере фиксированного размера. Он сохранит соотношение сторон и вставит серо-темные полосы сверху / снизу или слева / для записи для кратчайшего измерения. В то же время изображение центрируется по горизонтали с помощью выравнивания текста и по вертикали с помощью псевдоэлемента.

    > li {
      float: left;
      overflow: hidden;
      background-color: @gray-dark;
      text-align: center;

      > a img,
      > img {
        display: inline-block;
        max-height: 100%;
        max-width: 100%;
        width: auto;
        height: auto;
        margin: auto;
        text-align: center;
      }

      // Add pseudo element for vertical alignment of inline (img)
      &:before {
        content: "";
        height: 100%;
        display: inline-block;
        vertical-align: middle;
      }
    }

Полноэкранная презентация:

img[data-attribute] {height: 100vh;}

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

Я думаю, наконец, что это лучшее решение, легкое и простое :

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