目前,使用STYLE,我可以使用width: 100%和auto on height(反之亦然),但我仍然不能将图像约束到特定的位置,要么太宽,要么太高,分别。
什么好主意吗?
目前,使用STYLE,我可以使用width: 100%和auto on height(反之亦然),但我仍然不能将图像约束到特定的位置,要么太宽,要么太高,分别。
什么好主意吗?
当前回答
几年后,在寻找同样的需求时,我发现了一个使用background-size的CSS选项。
它应该可以在现代浏览器(IE9+)中运行。
<div id="container" style="background-image:url(myimage.png)">
</div>
以及风格:
#container
{
width: 100px; /*or 70%, or what you want*/
height: 200px; /*or 70%, or what you want*/
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
参考资料:http://www.w3schools.com/cssref/css3_pr_background-size.asp
demo: http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size
其他回答
我想这就是你要找的东西,我自己也在找,但在我找到密码之前我又想起来了。
background-repeat: repeat-x;
background-position: top;
background-size:auto;
background-attachment: fixed;
数字进化正在进行中。
使用JQuery,因为CSS是一个普遍的误解(这里关于简单设计目标的无数问题和讨论表明了这一点)。
用CSS做你想做的事情是不可能的:图像的宽度应该是100%,但如果这个宽度导致高度太大,max-height应该应用-当然正确的比例应该被保留。
也有同样的问题。对我来说,问题是高度属性也已经在其他地方定义,像这样固定它:
.img{
max-width: 100%;
max-height: 100%;
height: inherit !important;
}
几年后,在寻找同样的需求时,我发现了一个使用background-size的CSS选项。
它应该可以在现代浏览器(IE9+)中运行。
<div id="container" style="background-image:url(myimage.png)">
</div>
以及风格:
#container
{
width: 100px; /*or 70%, or what you want*/
height: 200px; /*or 70%, or what you want*/
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
参考资料:http://www.w3schools.com/cssref/css3_pr_background-size.asp
demo: http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size
这是一个非常直接的解决方案,我提出后,conca的链接,并查看背景大小。它将图像放大,然后将其置于外部容器中,不缩放。
<style>
#cropcontainer
{
width: 100%;
height: 100%;
background-size: 140%;
background-position: center;
background-repeat: no-repeat;
}
</style>
<div id="cropcontainer" style="background-image: url(yoururl); />