CSS force Image resize и сохранить соотношение сторон

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

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

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

img {
  max-width:500px;
}

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

378
aspect-ratio css image

17 ответов

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

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

569

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

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

Лучшая Практика (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>

Fancier Решение:

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

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

154

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

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

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

Ура.

111

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

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

теперь вы можете просто установить размер div на все, что вы хотите, и не только изображение будет держать его соотношение сторон он также будет централизован как по вертикали, так и по горизонтали в div. Просто не забудьте установить размеры на css, так как divs не имеют атрибута 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')";
57

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

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

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

удалите свойство" height".

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

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

дополнительно ограничить oversizings:

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

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

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

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

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

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

см. также связанный Firefox 392261 ошибка.

7

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

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

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

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

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

4

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

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 at http://codepen.io/Kseso/pen/bfdhg. Проверьте этот URL для получения дополнительных соотношений и рабочего примера.

3

вы можете создать 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
2

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

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

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

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">
2

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

решение setec отлично подходит для" усадки " в автоматическом режиме. Но, чтобы оптимально расшириться, чтобы вписаться в режим "авто", вам нужно сначала поместить полученное изображение в temp id, Проверьте, может ли он быть расширен по высоте или ширине (в зависимости от его соотношения сторон v/s соотношение сторон вашего блока отображения),

$(".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");
});

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

1

img {
  max-width: 80px; /* Also works with percentage value like 100% */
  height: auto;
}
<p>This image is originally 400x400 pixels, but should get resized by the CSS:</p>
<img width="400" height="400" src="https://i.stack.imgur.com/aEEkn.png">

<p>Let's say the author of the HTML deliberately wants
  the height to be half the value of the width,
  this CSS will ignore the HTML author's wishes, which may or may not be what you want:
</p>
<img width="400" height="200" src="https://i.stack.imgur.com/aEEkn.png">
0

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

    > 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;
      }
    }
0