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

前端之家收集整理的这篇文章主要介绍了使用CSS限制响应图像的高度前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我的最终目的是要有一个流体的“img”它不会扩展到仅使用css的父/祖父母元素的显式设置高度。

目前,我正在使用正常(max-width:100; height:auto;)流体图像和javascript,通过从img标签读取height / width属性,计算宽高比,计算图像的正确宽度所需的高度限制,并将该宽度作为最大宽度应用在图像的容器元素上。很简单,但我很想能够做到没有javascript。

高度:100%;宽度:汽车;不像其横向工作一样,我已经尝试了Unc Dave的填充盒和绝对定位功能,但需要事先知道图像的宽高比,因此不能应用于具有不同比例的图像。所以最终的要求是css必须是不可比拟的。

我知道,我知道,这个问题的答案可能是坐在独角兽农场旁边,但是我以为我会把它丢在那里。

解决方法

诀窍是添加max-height:100%;和最大宽度:100%;到.container img示例CSS:
.container {
  width: 300px;
  border: dashed blue 1px;
}

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

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

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

猜你在找的CSS相关文章