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

什么好主意吗?


当前回答

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

width: 100%;
height: auto;

其他回答

如果你只在一个图像上定义一个维度,图像的纵横比将始终保持。

问题是图像比你喜欢的更大/更高吗?

你可以把它放在一个DIV中,这个DIV被设置为你想要的图像的最大高度/宽度,然后设置overflow:hidden。那样会把你想要的东西都剪掉。

如果图像的宽度和高度都是100%,而你认为它太高了,这是因为保留了纵横比。您需要裁剪或更改纵横比。

请提供一些关于你具体想要完成的事情的更多信息,我会尽量帮助更多!

——根据反馈进行编辑——

你熟悉最大宽度和最大高度属性吗?你可以设置这些。如果你没有设置任何最小值,你设置了最大高度和宽度,那么你的图像将不会失真(纵横比将被保留),它将不会比最长的维度大。

我想这就是你要找的东西,我自己也在找,但在我找到密码之前我又想起来了。

background-repeat: repeat-x;
background-position: top;
background-size:auto;
background-attachment: fixed;

数字进化正在进行中。

我将此用于高度和宽度固定的矩形容器,但图像大小不同。

img {
  max-width: 95%;
  max-height: 15em;
  width: auto !important;
}

我不是想翻旧账,但是…

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

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

简单优雅的工作解决方案:

img {
  width: 600px;  /*width of parent container*/
  height: 350px; /*height of parent container*/
  object-fit: contain;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}