【发布时间】:2011-10-14 08:14:08
【问题描述】:
如何使用 CSS 缩放背景图像?图片是用 CSS 附加的,我想缩放它以适应一定的宽度
【问题讨论】:
-
点了。我确实尝试过搜索,显然不够好;)
标签: html css image positioning background-image
如何使用 CSS 缩放背景图像?图片是用 CSS 附加的,我想缩放它以适应一定的宽度
【问题讨论】:
标签: html css image positioning background-image
使用background-size 属性(具有limited support)。
【讨论】:
你可以试试下面的代码:
.aboutpic {
width: 150px; /* replace 150px with something you need */
float: left;
background-image: url(../images/aboutpic.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: 100%;
height: 139px; /* replace 139 px with something you need */
}
然后在html中放:
<div class="aboutpic"></div>
它有效。我测试过了。
【讨论】:
Javascript 是一个很好的开始方式,“jquery.backstretch.js”是一个非常好的 jquery 库来缩放背景 img。
或者,如果您的目标客户端使用现代浏览器,这意味着它可以支持 CSS3, 使用这个:
body{
background:url(background.jpg);
background-repeat:no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
【讨论】: