固定背景图的高度，让宽度自适应

最新推荐文章于 2020-12-26 07:50:25 发布

weixin_30654583

最新推荐文章于 2020-12-26 07:50:25 发布

阅读量145

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/dongxiaolei/p/5773729.html

本文介绍了一种使用CSS设置背景图片自适应的方法，通过固定容器高度并设置宽度为百分百，配合使用background-size属性实现背景图全覆盖效果。

将容器的高度固定，宽度设置成百分百，然后将background-size设置成cover。当宽度不够时，背景图的两边会隐藏

如下：将class是con的容器高度固定。宽度自适应

.con {
    width: 100%;
    height: 300px;
    background: url("image/vpb_intro/introduce_9.png") center center no-repeat;
    background-size: cover;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image/vpb_intro/introduce_9.png', sizingMethod='scale');
}