我有一张图片,我想给它设置一个特定的宽度和高度(像素)
但是如果我使用css (width:150px;高度:100px),图像将被拉伸,并且它可能是丑陋的。
如何使用CSS填充图像到特定的大小,而不是拉伸它?
填充和拉伸图像示例:
原始图像:
拉伸图片:
填充图片:
请注意,在上面的填充图像示例中:首先,图像被调整为150x255(保持长宽比),然后,它裁剪为150x100。
我有一张图片,我想给它设置一个特定的宽度和高度(像素)
但是如果我使用css (width:150px;高度:100px),图像将被拉伸,并且它可能是丑陋的。
如何使用CSS填充图像到特定的大小,而不是拉伸它?
填充和拉伸图像示例:
原始图像:
拉伸图片:
填充图片:
请注意,在上面的填充图像示例中:首先,图像被调整为150x255(保持长宽比),然后,它裁剪为150x100。
当前回答
基于@Dominic Green使用jQuery的回答,这里有一个解决方案,应该适用于图像宽度大于它们的高度或高于它们的宽度。
http://jsfiddle.net/grZLR/4/
可能有一种更优雅的方式来处理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();
其他回答
<div class="container">
<img src="http://i.stack.imgur.com/2OrtT.jpg"/>
</div>
<style>
.container {
width: 150px;
height: 100px;
overflow: hidden;
}
</style>
试试这个:http://jsfiddle.net/D7E3E/4/
使用溢出容器:隐藏
编辑:@多米尼克·格林打败了我。
增强了@afonsoduarte接受的答案。 以防你使用自举
Providing width:100% on the style. This is helpful if you are using bootstrap and want the image to stretch all the available width. Specifying the height property is optional, You can remove/keep it as you need .cover { object-fit: cover; width: 100%; /*height: 300px; optional, you can remove it, but in my case it was good */ } By the way, there is NO need to provide the height and width attributes on the image element because they will be overridden by the style. so it is enough to write something like this. <img class="cover" src="url to img ..." />
你可以使用css属性object-fit。(“设置替换元素的内容,如<img>或<video>,应该如何调整大小以适应其容器。”)
.cover { object-fit:封面; 宽度:50 px; 身高:100 px; } <img src="http://i.stack.imgur.com/2OrtT.jpg" class="cover" width="242" height="363" />
参见这里的例子
IE有一个polyfill: https://github.com/anselmh/object-fit
相关:object-position(指定元素内容在其框内的对齐方式)。
据我所知,有一个插件可以让这变得简单。
jQuery插件:自动转换<img>为背景样式
<img class="fill" src="image.jpg" alt="Fill Image"></img>
<script>
$("img.fill").img2bg();
</script>
此外,这种方式也满足了可达性需求。因为这个插件不会从你的代码中删除你的<img>标签,屏幕阅读器仍然会告诉你ALT文本,而不是跳过它。