Я работаю с изображениями и столкнулся с проблемой соотношения сторон.
<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">
в
Это позволит сделать изображение уменьшиться, если это's слишком большой для указанной области (как недостаток, он не будет увеличить изображение).
в <сильный>решения ниже позволит расширении и свертывании изображения</сильные> в зависимости от материнской ширина коробки.
Все изображения имеют родительский контейнер с фиксированной шириной <ем>только для демонстрационных целей</ЭМ>. В производстве, это будет ширина родительского окна.
Это решение указывает браузеру для отображения изображения с максимальным ширине и регулировать высоту в процентах от этой ширины.
в
.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>
в
Решение Птицевод#:
С решением любитель, вы'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">
<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%.
Я'вэ боролся с этой проблемой довольно сложно, и дошли до этого простого решения:
object-fit: cover;
width: 100%;
height: 250px;
Вы можете регулировать ширину и высоту, чтобы соответствовать вашим потребностям, а объект-фит собственность будет сделать обрезку для вас.
Ура.
Свойство 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')";
Очень похож на некоторые ответы здесь, но в моем случае у меня были образы, которые иногда были выше, иногда больше.
Этот стиль работал как шарм, чтобы убедиться, что все изображения использовать все доступное пространство, сохранить соотношение и не режет:
.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;"/>
Не существует стандартного способа сохранения соотношения сторон для изображений, у которых width
, height
и max-width
указаны вместе.
Поэтому мы вынуждены либо указывать width
и height
, чтобы предотвратить "прыжки" страницы при загрузке изображений, либо использовать max-width
и не указывать размеры изображений.
Указание только width
(без height
) обычно не имеет особого смысла, но вы можете попробовать переопределить HTML-атрибут height
, добавив в таблицу стилей правило типа IMG {height: auto; }
.
См. также соответствующее сообщение в Firefox ошибка 392261.
Задать класс CSS вашего контейнера тег изображения в `имидж-класса:
<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>
И СКС:
.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 дополнительные коэффициенты и рабочий пример.
Вот вам и ответ если вы хотите поместить изображение с фиксированный процент от ширины, но не фиксированные в пикселях ширина.
И это будет полезно при общении с различных размеров экрана.
Приемы
обивка-топ
для установки высоты от ширины.Макс-height и Max-ширина
, чтобы убедиться, что изображение не будет за родительского элемента.Я'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
В силу изображения, которые вписываются в точный размер, вы Дон'т должны написать слишком много кодов. Это'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 */
}
<img src="http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png" alt="Logo">
в
Вы можете использовать это:
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
Это позволит сделать изображение уменьшиться, если это'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'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">
в
Как насчет того, используя псевдо-элемент для вертикального выравнивания? Это меньше кода на карусели, но я предполагаю, что это работает на любом фиксированный размер контейнера. Это позволит сохранить пропорции и вставить @серый-темно-баров сверху/снизу или слева/запись на кратчайшее расстояние. В то же время изображение будет центрироваться по тексту-выровнять и по вертикали псевдо элемент.
> 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;
}
}