使用css限制响应图像的高度

Question

我的最终目标是<img>使用仅使用css 的流体不会扩展超过父/祖父元素的显式设置高度.

目前我正在使用normal(max-width:100; height:auto;)流体图像和javascript通过从img标签读取高度/宽度属性,计算纵横比,在所需高度限制下计算图像的正确宽度,并将该宽度应用为a max-width在图像的容器元素上.很简单,但我很乐意能够在没有javascript的情况下完成它.

height:100%; width:auto;它的横向效果不一样,我已经尝试过使用Unc Dave的ol'填充框和绝对定位功能,但需要预先知道图像的纵横比,因此无法应用于具有不同比例的图像.所以最后的要求是css必须与比例无关.

我知道,我知道,这个问题的答案可能就是坐在麒麟农场旁边,但我想我还是会把它扔出去.

Answer 1

诀窍在于同时添加max-height: 100%;和max-width: 100%;到.container img.CSS示例:

.container {
  width: 300px;
  border: dashed blue 1px;
}

.container img {
  max-height: 100%;
  max-width: 100%;
}

这样,您可以.container以任何方式改变指定的宽度(例如200px或10%),并且图像不会大于其自然尺寸.(如果您不想依赖图像的自然大小,则可以指定像素而不是100%.)

这是整个小提琴:http://jsfiddle.net/KatieK/Su28P/1/

Answer 2

img我为我的标签设置了以下 3 种样式

max-height: 500px;
height: 70%;
width: auto;

它的作用是，对于桌面屏幕，img 不会增长超出500px，但对于小型移动屏幕，它将缩小到外部容器的 70%。奇迹般有效。

它也适用于width财产。