所以这是一个奇怪的问题。
我正在开发一个 Wordpress 主题，并且该主题应该是完全响应的。我创建了一个“画廊”，其中包含多行 3 个缩略图，当在灯箱中单击打开时。我在网上找到了一段用于创建响应式“方形”元素的代码；仅使用 CSS 调整高度以匹配其响应宽度的元素。这涉及以百分比设置宽度（例如 50%），然后设置height:0px;and padding-bottom:50%;。我继续将每个图像放在一个像这样调整大小的响应式容器中，然后我设置图像的最大宽度和最大高度，这样它们就不会溢出它们的响应式方形容器。
这在除 ie7 之外的所有浏览器中都按预期显示。在ie7中，图像似乎消失了。我附上了一个小提琴（不是我的确切代码，但仍然导致问题）。http://jsfiddle.net/pwGYc/
这是实际的代码：
HTML：
<a href="<? echo $photo["url"]; ?>" class="photo" title="<? echo $photo["title"]; ?>">
<img src="<? echo $photo["url"]; ?>" alt="<? echo $photo["alt"]; ?>" title="<? echo $photo["title"]; ?>" />
</a>
CSS：
.photo{
float:left;
margin:10px;
width:30%;
height:0px;
overflow:hidden;
padding:5px 0px 30% 0px !important;
box-sizing:border-box;
position:relative;
}
.photo img{
position:absolute;
top:0px;
bottom:0px;
left:0px;
right:0px;
margin:auto;
max-height:97%;
max-width:97%;
}