2 qq 29408129 qq_29408129 于 2015.06.29 17:36 提问

css3怎么让背景宽为100%时,高度跟这个背景图等比例拉伸呢
 <style>
*{ margin:0; padding:0;}
.kech{ background-image: url(tu.jpg) ;background-size:100% auto;background-repeat: no-repeat; width:100%;}
.kech:before{content: ""; display: block; padding-top: 100%;}
.kech1 img{ width:100%;}

</style>
</head>

<body>
<div class="kech"></div>
<div class="kech1"><img src="tu.jpg"/></div>
</body>

我在网上找的,用:before,padding-top:100px;但是不对,就是想要kech跟kech1里的效果一样,当宽设置为100%时,背景等比例拉伸,就像把图片宽设置100%,高度自适应一样的效果

3个回答

Tiger_Zhao
Tiger_Zhao   Rxr 2015.06.30 14:03

widthbackground-size 不要一起用。只要下面这样就可以了。

    .kech{ background-image: url(tu.jpg) ;background-size:100%;background-repeat: no-repeat;}

Tiger_Zhao
Tiger_Zhao 又:仅靠背景图是不能影响<div>高度的。
大约 3 年之前 回复
vip_wst
vip_wst   2016.06.29 22:35

注意padding-top的值

* {
                margin: 0;
                padding: 0;
            }

            .kech {
                background-image: url(img/video-img.jpg);
                background-size: 100% auto;
                background-repeat: no-repeat;
                width: 100%;
            }

            .kech:before {
                content: "";
                display: block;
                padding-top: 60%; // 图片真实高度/宽度 * 100
            }

            .kech1 img {
                width: 100%;
            }
Hades1234567890
Hades1234567890 牛!!!
一年多之前 回复
lovemrzhou
lovemrzhou   2016.01.13 17:23

我用这个方法,背景后面会有一块空白,跟下面的元素有间距,调padding-top小于100%,空白区域可以去掉,但是感觉有问题,怎么处理尼

Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
理解CSS3中的background-size(对响应性图片等比例缩放)
转自文章    http://www.cnblogs.com/tugenhua0707/p/5260411.html 理解CSS3中的background-size(对响应性图片等比例缩放) 阅读目录 background-size的基本属性给图片设置固定的宽度和高度的固定宽度400px和高度200px-使用background-size:400px 200px缩放设置固
使用背景图片,图片高度随宽度自动变化,并居中缩放,不变形
item{    width:100%; height:0; padding-bottom:41.8%; overflow:hidden; background-position:50%; background-repeat:no-repeat; background-size:cover; }
背景图片宽度100%高度同比例放大不变形
解决方案: 1、js  通过计算屏幕宽度 根据图片的宽高度比例来计算高度 来调整div等标签的尺寸 2、使用rem作为单位,提前根据款高比在css写死宽高度 3、使用css样式,代码如下 以下解决方为CSS方式                   .Header           {             position:relative;        wi
css3 让背景图片拉伸填充
css3 让背景图片拉伸填充 background-size:200px 200px; background-size:100% 50%; background-size:cover; background-size:contain; background-size:auto;
DIV背景图片随DIV高度宽度变化而自动拉伸
 方法一:用css滤镜,问题是只支持IE5.5以上版本方法二:用两个层,一个放图片,用,为底部层;          另一个作页面显示层。建议用方法 西狐测试测试一下网页背景拉伸:) 实际使用后,发现有个需要注意的地方——使用AlphaImageLoader滤镜后,图片区域内的链接与按钮都将会失效,解决的办法是使用其他元素放置链接与按钮,浮动在该元素之上。 
css设置背景图拉伸铺满!
在css样式里设置背景图片拉伸充满有几种方法:1、用body里设置(但是这样的缺点是只能横向充满,高度是按比例拉伸的):background-size:100%;或者:background-size:cover;示例代码:body{ background-image:url(test.jpg); background-repeat:no-repeat; background-si...
css3的一个控制背景的属性,background-size可以缩放大小啦
ackground-size需要两个值,它的类型可以是像素(px)、百分比(%)或是auto,还可以是cover和contain。第一个值为背景图的width,另外一个值用于指定背景图上的height,如果只设定1个值,则第2个默认为auto,但当值为cover和contain时除外。 cover:保持图像的宽高比例,将图片缩放到正好完全覆盖定义的背景区域,其中有一边和背景相同。 ht
背景图片根据宽度自适应高度的方案
大幅度发
CSS实现(伪)背景图片压缩百分百显示。
先说下情况,最近帮公司做了一个登录页,由于是自己做,想做的多一点,比如说,浏览器缩放的时候能按比例显示,footer 能根据不同的显示器固定到底部 等等。 当然先做的越多遇到的问题就越多,比如说如果添加  在html文档头的时候,是按照html5来解释整个html文档,则如果某些div没有指定宽度,高度并且子元素按照百分比的形式来指定宽度,高度的话,会撑不去来父元素。导致整个页面布局都乱了。废话
在编写网站的时候,给一个div设置背景图片,怎么让这个图片随着div大小的改变,而等比例的缩放。
在编写网站的时候,给一个div设置背景图片,怎么让这个图片随着div大小的改变,而等比例的缩放。? background: url(**); background-size: cover; background-position: center center;   v+="";