收缩包装“最大尺寸”图像

Question

将图像max-width和max-height设置为100％可以实现预期目标并缩放图像以适合纵横比完整的容器。但是，我需要实现相同的功能，但在图像周围有一个额外的容器（能够相对于图像定位其他东西）。

我正在寻找非JS解决方案，并且标记语义不是问题，因为这是针对应用程序的。 （表格没问题）。也可以认为图像尺寸已知。

描述我想要的另一种方式：使图像始终适合身体并在其周围显示边框（不使用在图像上放置边框的简单解决方案）

这是显示问题的fiddle。我给图像一个0.5不透明度，使黄色容器显示出来。目标是使容器始终与图像大小相同。 IE浏览器。图像将始终具有黄色色调，但不应显示其他黄色区域。注意：我不是想要实现任何着色效果，它只是问题的一个例子。

Answer 1

试试这个，http://jsfiddle.net/xmarcos/K4dHr/

更新： http://jsfiddle.net/xmarcos/K4dHr/4/

Answer 2

在这里，这似乎有效：http://jsfiddle.net/Wexcode/vzc4m/1/

您不需要在<div>周围设置最大高度，因为如果将其设置为display: inline-block，它将延伸到其内部元素的尺寸。强制<img>拥有display: block将确保在容器内的元素周围没有添加任何额外空间，除非您指定它（使用边距）。