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

img撑满全屏的方法（img非背景图）相关推荐

Vue-cli 中为单独页面设置背景图片铺满全屏的方法
Vue-cli 中为单独页面添加张背景图片从而达到铺满全屏的方法 <template><div id="logo"></div> </te ...
css解决uniapp使用image标签图片无法撑满全屏问题
css解决uniapp使用image标签图片无法撑满全屏问题文章目录 css解决uniapp使用image标签图片无法撑满全屏问题前言一.问题还原二.问题解决 1.在解决问题之前有必要先来学习 ...
CSS高度铺满全屏的方法
方法一: 将body和html得高度设置为100%,再设置div高度为100% <!DOCTYPE html> <html lang="en"> <h ...
背景图片铺满全屏的方法
1.css3有一个属性:background-size:cover;可以让背景图片完全覆盖屏幕,但是IE9以下浏览器无效. 2.IE有个滤镜: filter:progid:DXImageTransfo ...
将VirtualBox虚拟机电脑屏幕填满全屏的方法
使用VirtualBox的时候,由于默认是没有全屏的,如下上下左右都有空白,不管怎么设置都无法填满,那么这篇文章将能帮到你. 操作前: 操作后: 安装VirtualBox Guest Addition ...
解决EditText不能撑满全屏的问题及EditText你应该知道的属性
一般我们要实现去下图一的效果很简单: 两个EditText就搞定效果图一: 但是我们想让第二个EditText撑满剩余空间怎么做?如效果图二效果图二: 解决: 使用了ScrollView嵌套Lin ...
web图片铺满网页_html5的video的背景图片poster铺满全屏大小方法
html5支持视频播放,而且趋势,facebook也全面切换到html5了,最近做一个简单的视频播放器,测试了好多jplayer,video.js之类的都觉得不太好,所以自己写一个最简单的,不过发现了 ...
w10投影全屏设置_win10如何让投影仪铺满全屏
win10如何让投影仪铺满全屏?很多用户使用投影仪没有铺满,上下有空隙,不是全屏显示的,不知如何设置的用户,接下来就由小编教大家win10系统投影仪铺满全屏的设置方法吧. win10如何让投影仪铺满全 ...
html怎样使一个视频充满整个屏幕,抖音视频怎么铺满全屏
大家好,我是时间财富网智能客服时间君,上述问题将由我为大家进行解答. 抖音视频铺满全屏的方法是: 1.首先打开手机设置,然后点开通用. 2.然后在通用里面,点开辅助功能. 3.在复制功能有个缩放,打开 ...

img撑满全屏的方法（img非背景图）

object-fit解决方法：

img撑满全屏的方法（img非背景图）相关推荐

最新文章

热门文章