Я работаю с изображениями, и я столкнулся с проблемой соотношения сторон.
<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">Приведенные ниже решения позволят увеличить или уменьшить изображение, в зависимости от ширины родительского блока.
Все изображения имеют родительский контейнер с фиксированной шириной только для демонстрационных целей. В производстве это будет ширина родительского блока.
Это решение говорит браузеру визуализировать изображение с максимально доступной шириной и регулировать высоту в процентах от этой ширины.
.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>Я очень сильно боролся с этой проблемой и в конце концов пришел к такому простому решению:
object-fit: cover;
width: 100%;
height: 250px;
Вы можете настроить ширину и высоту в соответствии с вашими потребностями, а свойство object-fit сделает обрезку для вас.
Приветствия.
Свойство background-size имеет значение только >= 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, так как divs не имеют атрибута width/height самого тега.
Этот подход отличается от ответа setecs, используя это, область изображения будет постоянной и определенной вами (оставляя пустое пространство горизонтально или вертикально в зависимости от размера div и пропорции изображения), в то время как ответ setecs предоставит вам поле что точно размер масштабируемого изображения (без пустых пространств).
Изменить: В соответствии с документами размера фона MDN вы можете имитировать свойство background-size в IE8 с использованием проприетарного объявления фильтра:
Хотя Internet Explorer 8 не поддерживает свойство background-size, можно использовать некоторые из его функций, используя функцию нестандартного -ms-фильтра:
-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;
}
Удалите свойство height.
<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) обычно не имеет особого смысла, но вы можете попытаться переопределить HTML-атрибут height, добавив правило, подобное IMG {height: auto; }, в свою таблицу стилей.
См. также связанную ошибку Firefox 392261.
Установите для класса 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/
Вот ответ, если вы хотите поместить изображение с фиксированным процентом ширины, но не с фиксированным пикселем ширины.
И это будет полезно при работе с экраном другого размера.
Уловки
padding-top установите высоту по ширине.position: absolute, чтобы поместить изображение в отступы.max-height and max-width, убедитесь, что изображение не будет поверх родительского элемента.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
Вы можете создать 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
Вы можете использовать это:
img {
width: 500px;
height: 600px;
object-fit: contain;
position: relative;
top: 50%;
transform: translateY(-50%);
}
Это уменьшит изображение, если оно слишком велико для указанной области (как недостаток, он не будет увеличивать изображение).
Решение setec отлично подходит для "Shrink to Fit" в автоматическом режиме. Но, чтобы оптимально РАСШИРЯТЬ, чтобы вписаться в "автоматический" режим, вам нужно сначала перенести полученное изображение в временный идентификатор, Проверьте, может ли он расширяться по высоте или по ширине (в зависимости от его формата пропорции 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");
});
Этот подход полезен, когда принятые изображения меньше, чем окно отображения. Вы должны сохранить их на своем сервере в оригинальном малом размере, а не в расширенной версии, чтобы заполнить свой экран большего размера, чтобы сохранить размер и пропускную способность.
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 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 wishes, which may or may not be what you want:
</p>
<img width="400" height="200" src="https://i.stack.imgur.com/aEEkn.png">Как насчет использования псевдоэлемента для вертикального выравнивания? Это меньше кода для карусели, но я думаю, что он работает на каждом контейнере с фиксированным размером. Он сохранит пропорции и вставляет @серо-темные полосы сверху/снизу или слева/запись для кратчайшего измерения. Между тем изображение центрируется по горизонтали с помощью выравнивания текста и вертикали псевдоэлементом.
> 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;}
Имейте в виду, что если высота порта обзора больше, чем изображение, изображение будет естественно ухудшаться по сравнению с разницей.