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

16411   17  

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  
2016-03-02 16:12:59

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

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

Лучшая Практика (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  
2018-03-24 01:28:04

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

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

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

Ура.

111  
2016-08-19 15:35:16

свойство 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 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')";
57  
2014-04-11 16:43:37

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

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

.img {
   object-fit: contain;
   max-width: 100%;
   max-height: 100%;
   width: auto;
   height: auto;
}
16  
2017-08-29 21:14:48

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

<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;"/>
15  
2013-07-10 17:35:38

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

img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}
9  
2015-04-15 13:11:21

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

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

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

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

7  
2018-04-11 02:34:42

установите класс 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  
2014-08-20 00:13:42

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  
2018-03-05 09:05:21

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

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  
2016-03-22 14:39:30

вы можете создать 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  
2015-01-24 21:40:24

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

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

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

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  
2016-10-24 14:32:32

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

решение setec отлично подходит для" усадки " в автоматическом режиме. Но, чтобы оптимально развернуться, чтобы вписаться в режим "авто", вам нужно сначала поместить полученное изображение в Временный идентификатор, Проверьте, может ли он быть расширен по высоте или по ширине (в зависимости от его соотношения сторон 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  
2015-02-18 10:29:39 

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  
2016-03-02 16:42:20

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

    > 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  
2017-08-02 22:15:31

Comments

    Ничего не найдено.
Click here to cancel reply.