CSS размер изображения, как заполнить, а не растянуть?
У меня есть изображение, и я хочу установить его определенную ширину и высоту (в пикселях)
но если я устанавливаю ширину и высоту с помощью css (width:150px; height:100px
), изображение будет растянуто, и оно может быть уродливым.
Как заполнить изображения определенного размера с помощью CSS и не растягивая это?
пример заливки и растяжки изображения:
Оригинальное Изображение:
растягивается Изображение:
Заполнил Изображения:
обратите внимание, что в Примере с заполненным изображением выше: сначала изображение изменяется до 150x255 (поддерживается соотношение сторон), а затем оно обрезанные в 150x100.
11 ответов
если вы хотите использовать изображение в качестве фона в CSS, есть элегантное решение. Просто используйте cover
или contain
на background-size
свойство в CSS3.
<div class="container"></div>
.container {
width: 150px;
height: 100px;
background-image: url("http://i.stack.imgur.com/2OrtT.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%;
}
пока cover
даст вам масштабированное изображение,contain
даст вам уменьшенное изображение. Оба сохранят соотношение сторон пикселей.
http://jsfiddle.net/uTHqs/ (используя крышку)
http://jsfiddle.net/HZ2FT/ (используя contain)
этот подход имеет то преимущество, что он дружелюбен к дисплеям Retina в соответствии с быстрым руководством Томаса Фукса. http://cl.ly/0v2u190o110R
стоит отметить, что поддержка браузера для обоих атрибутов исключает IE6-8. http://www.quirksmode.org/css/background.html
вы можете использовать свойство css object-fit
.
<img src="http://i.stack.imgur.com/2OrtT.jpg" class="cover" width="242" height="363" />
.cover {
object-fit: cover;
width: 50px;
height: 100px;
}
есть polyfill для IE:https://github.com/anselmh/object-fit
единственный реальный способ иметь контейнер вокруг вашего изображения и использовать overflow:hidden
:
HTML-код
<div class="container"><img src="ckk.jpg" /></div>
в CSS
.container {
width: 300px;
height: 200px;
display: block;
position: relative;
overflow: hidden;
}
.container img {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
это боль в CSS, чтобы сделать то, что вы хотите, и центрировать изображение, есть быстрое исправление в jquery, например:
var conHeight = $(".container").height();
var imgHeight = $(".container img").height();
var gap = (imgHeight - conHeight) / 2;
$(".container img").css("margin-top", -gap);
на самом деле, это просто вывод из самых upvoted ответ на этот вопрос (не принят).
есть два отличия:
-
нет необходимости предоставлять
height
иwidth
атрибутыimage
элемент, потому что они будут переопределены стилем.
так что достаточно написать что-то вроде этого.<img src="http://i.stack.imgur.com/2OrtT.jpg" class="cover" />
-
предоставляет
width:100%
на стиль.
это полезно, если вы используете загрузки и хотите, чтобы изображение растянулось на всю доступную ширину.
Указаниеheight
свойство является необязательным, но в моем случае это было хорошо..cover { object-fit: cover; width: 100%; height: 300px; /* optional, but in my case it was good */ }
CSS решение нет JS и нет фонового изображения:
метод 1 "маржа авто" ( IE8+ - не FF!):
div{
width:150px;
height:100px;
position:relative;
overflow:hidden;
}
div img{
position:absolute;
top:0;
bottom:0;
margin: auto;
width:100%;
}
<p>Original:</p>
<img src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>
<p>Wrapped:</p>
<div>
<img src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>
</div>
Метод 2 "преобразование" (IE9+ ):
div{
width:150px;
height:100px;
position:relative;
overflow:hidden;
}
div img{
position:absolute;
width:100%;
top: 50%;
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
<p>Original:</p>
<img src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>
<p>Wrapped:</p>
<div>
<img src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>
</div>
http://jsfiddle.net/5xjr05dt/1/
Метод 2 можно использовать для центрирования изображение в контейнере фиксированной ширины / высоты. Оба могут переполняться - и если изображение меньше, чем контейнер, оно все равно будет центрировано.
http://jsfiddle.net/5xjr05dt/3/
Метод 3 "двойная обертка" (IE8+ - не FF! ):
.outer{
width:150px;
height:100px;
margin: 200px auto; /* just for example */
border: 1px solid red; /* just for example */
/* overflow: hidden; */ /* TURN THIS ON */
position: relative;
}
.inner {
border: 1px solid green; /* just for example */
position: absolute;
top: 0;
bottom: 0;
margin: auto;
display: table;
left: 50%;
}
.inner img {
display: block;
border: 1px solid blue; /* just for example */
position: relative;
right: 50%;
opacity: .5; /* just for example */
}
<div class="outer">
<div class="inner">
<img src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>
</div>
</div>
http://jsfiddle.net/5xjr05dt/5/
метод 4 "Двойная обертка и двойное изображение" ( IE8+ ):
.outer{
width:150px;
height:100px;
margin: 200px auto; /* just for example */
border: 1px solid red; /* just for example */
/* overflow: hidden; */ /* TURN THIS ON */
position: relative;
}
.inner {
border: 1px solid green; /* just for example */
position: absolute;
top: 50%;
bottom: 0;
display: table;
left: 50%;
}
.inner .real_image {
display: block;
border: 1px solid blue; /* just for example */
position: absolute;
bottom: 50%;
right: 50%;
opacity: .5; /* just for example */
}
.inner .placeholder_image{
opacity: 0.1; /* should be 0 */
}
<div class="outer">
<div class="inner">
<img class="real_image" src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>
<img class="placeholder_image" src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>
</div>
</div>
http://jsfiddle.net/5xjr05dt/26/
- метод 1 имеет немного лучшую поддержку - вы должны установить ширину или высоту изображения!
- с префиксами Метод 2 также имеет достойную поддержку (от ie9 до ) - Метод 2 не имеет поддержки в Opera mini!
- Метод 3 использует две обертки - может переполнять ширину и высоту.
- метод 4 использует двойное изображение ( один как заполнитель ) это дает некоторые дополнительные накладные пропускной способности, но еще лучше поддерживать кроссбраузерный.
метод 1 и 3, похоже, не работают с Firefox
другое решение-поместить изображение в контейнер с нужной шириной и высотой. Используя этот метод, вам не нужно будет устанавливать изображение в качестве фонового изображения элемента.
затем вы можете сделать это с помощью img
tag и просто установите max-width и max-height на элементе.
CSS:
.imgContainer {
display: block;
width: 150px;
height: 100px;
}
.imgContainer img {
max-width: 100%;
max-height: 100%;
}
HTML-код:
<div class='imgContainer'>
<img src='imagesrc.jpg' />
</div>
теперь, когда вы изменяете размер контейнера, изображение будет автоматически расти как можно больше без перехода за пределами границ или искажая.
если вы хотите центр изображения вертикально и горизонтально, вы можете изменить CSS для контейнера:
.imgContainer {
display: table-cell;
width: 150px;
height: 100px;
text-align: center;
vertical-align: middle;
}
вот Скрипка JS http://jsfiddle.net/9kUYC/2/
построение ответа @ Dominic Green с помощью jQuery, вот решение, которое должно работать для изображений, которые либо шире, чем они высоки, либо выше, чем они широки.
существует, вероятно, более элегантный способ выполнения JavaScript, но это работает.
function myTest() {
var imgH = $("#my-img").height();
var imgW = $("#my-img").width();
if(imgW > imgH) {
$(".container img").css("height", "100%");
var conWidth = $(".container").width();
var imgWidth = $(".container img").width();
var gap = (imgWidth - conWidth)/2;
$(".container img").css("margin-left", -gap);
} else {
$(".container img").css("width", "100%");
var conHeight = $(".container").height();
var imgHeight = $(".container img").height();
var gap = (imgHeight - conHeight)/2;
$(".container img").css("margin-top", -gap);
}
}
myTest();
Я помог создать плагин jQuery под названием Филлмор, который обрабатывает background-size: cover
в браузерах, которые поддерживают его, и имеет прокладку для тех, кто этого не делает. Посмотри на него!
попробуйте что-то вроде этого: http://jsfiddle.net/D7E3E/4/
использование контейнера с переполнением: hidden
EDIT: @Dominic Green избил меня.
это заполнит изображения до определенного размера, не растягивая его или не обрезая его
img{
width:150px; //your requirement size
height:100px; //your requirement size
/*Scale down will take the necessary specified space that is 150px x 100px without stretching the image*/
object-fit:scale-down;
}
Я думаю, что для этого ответа уже довольно поздно. В любом случае надеюсь, что это поможет кому-то в будущем. Я столкнулся с проблемой позиционирования карт в angular. Есть карты, отображаемые для массива событий. Если ширина изображения события большая для карты, изображение должно быть показано обрезкой с двух сторон и высотой 100 %. Если высота изображения длинная, нижняя часть изображения обрезается, а ширина-100 %. Вот мое чистое решение css для это:
HTML-код:
<span class="block clear img-card b-b b-light text-center" [ngStyle]="{'background-image' : 'url('+event.image+')'}"></span>
в CSS
.img-card {
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
width: 100%;
overflow: hidden;
}