本文翻译自:CSS Image size, how to fill, not stretch?
I have an image, and I want to set it a specific width and height (in pixels) 我有一个图像,我想设置一个特定的宽度和高度(以像素为单位)
But If I set width and height using css ( width:150px; height:100px
), image will be stretched, and It may be ugly. 但如果我使用css( width:150px; height:100px
)设置宽度和高度,图像将被拉伸,它可能是丑陋的。
How to Fill images to a specific size using CSS, and not stretching it? 如何使用CSS 将图像填充到特定大小,而不是拉伸它?
Example of fill and stretching image: 填充和拉伸图像的示例:
Original Image: 原始图片:
Stretched Image: 拉伸图像:
Filled Image: 填充图片:
Please note that in the Filled image example above: first, image is resized to 150x255 (maintained aspect ratio), and then, it cropped to 150x100. 请注意,在上面的填充图像示例中:首先,将图像调整为150x255(保持纵横比),然后将其裁剪为150x100。
#1楼
参考:https://stackoom.com/question/nKfh/CSS图像大小-如何填充-不拉伸
#2楼
The only real way is to have a container around your image and use overflow:hidden
: 唯一真正的方法是在图像周围overflow:hidden
一个容器并使用overflow:hidden
:
HTML HTML
<div class="container"><img src="ckk.jpg" /></div>
CSS CSS
.container {
width: 300px;
height: 200px;
display: block;
position: relative;
overflow: hidden;
}
.container img {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
It's a pain in CSS to do what you want and center the image, there is a quick fix in jquery such as: 要做你想做的事情并使图像居中,这是一个很痛苦的CSS,jquery中有一个快速解决方法,例如:
var conHeight = $(".container").height();
var imgHeight = $(".container img").height();
var gap = (imgHeight - conHeight) / 2;
$(".container img").css("margin-top", -gap);
http://jsfiddle.net/x86Q7/2/ http://jsfiddle.net/x86Q7/2/
#3楼
Try something like this: http://jsfiddle.net/D7E3E/4/ 尝试这样的事情: http : //jsfiddle.net/D7E3E/4/
Using a container with overflow: hidden 使用溢出的容器:隐藏
EDIT: @Dominic Green beat me. 编辑:@Dominic Green打败了我。
#4楼
If you want to use the image as a CSS background, there is an elegant solution. 如果您想将图像用作CSS背景,那么就有一个优雅的解决方案。 Simply use cover
or contain
in the background-size
CSS3 property. 只需使用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%;
}
While cover
will give you a scaled up image, contain
will give you a scaled down image. cover
会给你一个放大的图像, contain
会给你一个缩小的图像。 Both will preserve the pixel aspect ratio. 两者都将保留像素长宽比。
http://jsfiddle.net/uTHqs/ (using cover) http://jsfiddle.net/uTHqs/ (使用封面)
http://jsfiddle.net/HZ2FT/ (using contain) http://jsfiddle.net/HZ2FT/ (使用包含)
This approach has the advantage of being friendly to Retina displays as per Thomas Fuchs' quick guide. 根据Thomas Fuchs的快速指南,这种方法具有对Retina显示器友好的优点。
It's worth mentioning that browser support for both attributes excludes IE6-8. 值得一提的是,浏览器对这两个属性的支持不包括IE6-8。
#5楼
I helped build a jQuery plugin called Fillmore , which handles the background-size: cover
in browsers that support it, and has a shim for those that don't. 我帮助构建了一个名为Fillmore的jQuery插件,它在支持它的浏览器中处理background-size: cover
,并为那些不支持它的浏览器提供了一个垫片。 Give it a look! 看看吧!
#6楼
Building off of @Dominic Green's answer using jQuery, here is a solution that should work for images that are either wider than they are high or higher than they are wide. 使用jQuery建立@Dominic Green的答案,这里的解决方案应该适用于宽度高于或高于宽度的图像。
http://jsfiddle.net/grZLR/4/ http://jsfiddle.net/grZLR/4/
There is probably a more elegant way of doing the JavaScript, but this does work. 可能有一种更优雅的方式来做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();