如何用纯CSS将图片填满div,自适应容器大小

 2016-10-11 13:33

我有一个模板,想按常规做一个div里面放置一个img图片,并且让图片铺满容器,自适应容器大小。HTML结构代码如下(在这个盒模型上,我已经放置了一些不重要的样式)。

115043384nhw3r4vvuziii.jpg


<div style="height:270px;width:400px;border:2px black solid;">
    <a href="http://www.paipk.com"><img src="..." alt="拍拍看科技"></a>
</div>

现在我初步想了两个方案,但都不是太完善的,想请高手帮忙参考下:

object-fit解决方法:

直接给img套用一个object-fit:cover;让img填满盒模型。

div img{
    width: 100%;
    height: 100%;
    object-fit:cover;
}

这个方法很简单也很实用,也符合理论上对盒模型和IMG容器的解释。因为img本来也是一个容器,只不过它是公认的用来引导图片的容器,用替换法把图片替换成覆盖的尺寸就是我要的效果。这个思路在理论上都是正确的。

但由于是新代码,在一些浏览器上还不兼容。回退机制上,如果浏览器不认识object-fit,那整个图片就会被强制拉伸成容器的尺寸。所以在回退机制上有待解决!

min方法:

这是我这两天思考出来的,是通过对img元素垂直居中,并将它的高度和宽度设置一个最小满屏值,这样,也能让图片铺满容器:

div{
    position:relative;
    overflow:hidden;
}
div img{
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    min-width: 100%;
    min-height: 100%;
    transform:translate(-50%,-50%);
}

图片高度或宽度任意一尺寸小于容器时,这个情况是正常的,但如果图片的高度和宽度尺寸都大于容器,图片也能铺满,但容器就只显示大图的中间部分。这就是这个方法的缺陷。

其他是想法:

我还尝试过给img容器加一个背景,设置背景铺满元素,然后想把URL对应的图片影藏掉,但未能成功~


希望有好方法的朋友不吝赐教。

作者头像

作者:紫铜炉

自由博主,网页设计师。我关注科技产品和个人博客发展,注重用户体验和界面优化。

 发表评论:

 评论列表

一口一口 2016-10-11  15:09

希望能解决你的问题[/可爱]

紫铜炉 2016-10-11  17:04

这个方法我知道,但这个方法已经改变了HTML结构,所以我没提。另外,这个方法对搜索引擎不是很友好!

一口一口 2016-10-11  15:09

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>填充Div</title>
<style>
#skin_bg{background-size:cover;
background-position:center;
position:fixed;
top:0;left:0;
height:100%;width:100%;

}
</style>
</head>

<body>
<div id=skin_bg style=background-image:url(./bgimage.jpg)>
</div>
</body>
</html>