对于像我今天一样寻找适用于横向、纵向、矩形、正方形等各种图像和任意容器尺寸的解决方案的任何人,我在下面附上了自己的代码。
这个解决方案也可以实现响应式,只需在窗口大小改变时再次运行即可。
JSFiddle:
http://jsfiddle.net/66c43ao1/
HTML
<div class="test">
<div class="cover">
<img src="http://d2ws0xxnnorfdo.cloudfront.net/character/meme/cool-dog.jpg" width="590" height="590"/>
</div>
</div>
CSS
.test {
height: 300px;
position: relative;
width: 500px;
}
.cover {
height: 100%;
left: 0;
overflow: hidden;
position: absolute;
top: 0;
width: 100%;
z-index: 1;
}
JS
$('.cover').each(function() {
var containerHeight = $(this).height(),
containerWidth = $(this).width(),
image = $(this).children('img'),
imageHeight = image.attr('height'),
imageWidth = image.attr('width'),
newHeight = imageHeight,
newWidth = imageWidth;
if (imageWidth < containerWidth) {
newWidth = containerWidth;
newHeight = imageHeight * newWidth/imageWidth;
}
if (imageHeight < containerHeight) {
newHeight = containerHeight;
newWidth = imageWidth * newHeight/imageHeight;
}
var marginLeft = (newWidth - containerWidth)/2;
var marginTop = (newHeight - containerHeight)/2;
image.css({
marginLeft : '-' + marginLeft + 'px',
marginTop : '-' + marginTop + 'px',
height : newHeight,
width : newWidth
});
});
当然,您可以使用像Backstretch这样的库来完成相同的事情,但我发现这个解决方案更适合我的目的(没有增加依赖项,更轻量级等)。
$('.box').each(function(i) { $(this).children('img:first').height($(this).height()).width($(this).width()).css({ position: 'absolute', top: 0, left: 0 }); })
- SpYk3HHbackground-size: cover
不同,而是相同的background: 100% 100%
。 - MattDiamant