CSS принудительно изменяет размер изображения и сохраняет соотношение сторон

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

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

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

img {
  max-width:500px;
}

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

Cody Guldner
Редактировал вопрос 4-го июня 2013 в 5:23
Программирование
image css aspect-ratio
20-го октября 2012 в 6:20
67 просмотров
Решение

в 

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>

в

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

Flimm
Редактировал ответ 2-го марта 2016 в 2:12
Комментарии (14)

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

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

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

</div>

в

Решение Птицевод#:

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

в 

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

  </div>
</div>

в

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

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

640/220 = 2.909
100/2.909 = 34.37%

Так, отступ сверху = 34.37%.

Aternus
Редактировал ответ 23-го марта 2018 в 11:28
Комментарии (17)

Я'вэ боролся с этой проблемой довольно сложно, и дошли до этого простого решения:

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

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

Ура.

Комментарии (7)

Свойство 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 documentation вы можете имитировать свойство 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')";
Комментарии (5)

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

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

.img {
   object-fit: contain;
   max-width: 100%;
   max-height: 100%;
   width: auto;
   height: auto;
}
Комментарии (3)

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

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

Опционально, чтобы ограничить увеличение размеров:

Комментарии (4)

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

img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}
Комментарии (3)

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

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

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

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

Marat Tanalin
Редактировал ответ 10-го апреля 2018 в 11:34
Комментарии (3)

Задать класс CSS вашего контейнера тег изображения в `имидж-класса:

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

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

.image-full {
    background: url(...some image...) no-repeat;
    background-size: cover;
    background-position: center center;
}
Комментарии (0)

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

HTML-код:

<div class="ratio2-1">
   ![image](../image.png)
</div>

И СКС:

.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 дополнительные коэффициенты и рабочий пример.

Комментарии (1)

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

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

И это будет полезно при общении с различных размеров экрана.

Приемы

  1. Используя обивка-топ для установки высоты от ширины.
  2. Используя позицию: абсолютная, чтобы поставить изображение на заполнение пространства.
  3. Используя Макс-height и Max-ширина, чтобы убедиться, что изображение не будет за родительского элемента.
  4. используя дисплей:блок и маржи: авто в центр изображения.

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

Я также найти некоторые другие способы, чтобы это произошло. Не будет реального изображения в HTML, так что я personly скачал верхний ответ, когда мне нужно и"ИМГ" и элемент в HTML.

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

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

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

Choco Li
Редактировал ответ 5-го марта 2018 в 7:05
Комментарии (1)

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

в 

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 */
    }
![Logo](http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png)

в

Комментарии (0)

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

img { 
    width: 500px; 
    height: 600px; 
    object-fit: contain; 
    position: relative; 
    top: 50%; 
    transform: translateY(-50%); 
}
Rakete1111
Редактировал ответ 26-го марта 2016 в 1:30
Комментарии (0)

Вы можете создать элемент 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
Комментарии (3)

Это позволит сделать изображение уменьшиться, если это'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");
});

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

xec
Редактировал ответ 18-го февраля 2015 в 8:29
Комментарии (1)

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

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

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

Комментарии (0)

в 

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>


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

в

Комментарии (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)