img撑满全屏的方法(img非背景图)

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

<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%);
}

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

last 如果不需要支持IE老版本的话,可以使用background-size属性cover进行设置。如:(背景图img撑满全屏)

<div class="img"></div>
div.img {
            width: 400px;
            height: 200px;
            background-image: url(http://img5.imgtn.bdimg.com/it/u=4021999557,1995524928&fm=11&gp=0.jpg);
            -webkit-background-size:cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
        }

  • 8
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 要让CSS背景图全屏铺满自适应,可以使用以下代码: ```css body { background: url('img/bg.jpg') no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } ``` 其中,`background` 属性设置背景图片,`background-size` 属性设置背景图片大小,`cover` 值表示让图片完全覆盖背景区域,`center center` 值表示让图片居中对齐。添加`-webkit-`、`-moz-`、`-o-`前缀可以兼容不同的浏览器。 ### 回答2: 要使CSS背景图全屏铺满并自适应,可以使用以下方法: 1. 使用CSS属性background-size:cover来调整背景图片的尺寸,使其完全覆盖整个屏幕。background-size:cover保持图片的原始比例并将其调整为填充整个容器。 示例代码如下: ``` body { background-image: url('背景图片的URL'); background-size: cover; } ``` 2. 还可以使用CSS属性background-position:center来调整背景图片的位置,使其在屏幕中居中显示。 示例代码如下: ``` body { background-image: url('背景图片的URL'); background-size: cover; background-position: center; } ``` 3. 另外,还可以使用CSS属性background-repeat:no-repeat来禁止背景图片的重复显示,确保只显示一次。 示例代码如下: ``` body { background-image: url('背景图片的URL'); background-size: cover; background-position: center; background-repeat: no-repeat; } ``` 通过以上方法,可以实现CSS背景图全屏铺满并自适应屏幕大小的效果。 ### 回答3: 要使CSS背景图全屏铺满自适应,可以使用CSS3中的background-size属性。该属性可以控制背景图像的大小,以实现全屏铺满效果。 首先,需要设置背景图片的url,并将其应用于相应的元素上。例如,可以使用以下CSS代码来设置一个填充整个屏幕的背景图片: ```css body { background-image: url("background.jpg"); background-repeat: no-repeat; background-size: cover; background-position: center; } ``` 在上述代码中,将背景图片的URL替换为实际的图片路径。background-repeat属性设置为no-repeat,以避免背景图片重复出现。background-size属性设置为cover,以确保背景图片可以完全覆盖整个屏幕,同时保持其宽高比例。background-position属性设置为center,将背景图片居中显示。 此外,还可以使用contain值来替代cover值,这将确保背景图片在完全覆盖整个屏幕的同时,保持其宽高比例不变。例如: ```css body { background-image: url("background.jpg"); background-repeat: no-repeat; background-size: contain; background-position: center; } ``` 以上代码中的contain值将背景图像缩放,以使其适应屏幕的宽度或高度,同时保持其宽高比例不变。 通过使用这些CSS属性,可以实现CSS背景图全屏铺满自适应的效果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值