目前,使用STYLE,我可以使用width: 100%和auto on height(反之亦然),但我仍然不能将图像约束到特定的位置,要么太宽,要么太高,分别。

什么好主意吗?


当前回答

最好在应该尊重纵横比的尺寸上使用auto。如果你没有将另一个属性设置为auto,现在大多数浏览器会假设你想要尊重纵横比例,但不是所有的浏览器都这样(例如,windows phone 8上的IE10就不这样)。

width: 100%;
height: auto;

其他回答

使用JQuery,因为CSS是一个普遍的误解(这里关于简单设计目标的无数问题和讨论表明了这一点)。

用CSS做你想做的事情是不可能的:图像的宽度应该是100%,但如果这个宽度导致高度太大,max-height应该应用-当然正确的比例应该被保留。

这是一个非常直接的解决方案,我提出后,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); />

我不是想翻旧账,但是…

#container img {
      max-width:100%;
      height:auto !important;
}

即使这是不合适的,因为你使用!重要的覆盖高度,如果你使用CMS,如WordPress,为你设置高度和宽度,这工作得很好。

最好在应该尊重纵横比的尺寸上使用auto。如果你没有将另一个属性设置为auto,现在大多数浏览器会假设你想要尊重纵横比例,但不是所有的浏览器都这样(例如,windows phone 8上的IE10就不这样)。

width: 100%;
height: auto;

几年后,在寻找同样的需求时,我发现了一个使用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