css - 响应式：如何保持堆叠 div 的比例？

Question

我正在制作一个响应式网站，它的标题设置为调整大小。在该图像上，我必须在 x,​​y 位置放置另一个较小的图像（它必须链接出来）。我的问题是如何在网站重新调整大小时保持比例？我可以用百分比来定义宽度，但是高度呢？ems 没有给我足够的高度控制（除非我误解了如何使用它们）。

.gallery { width:100%; position:relative; }
.gallery-over { position:relative;margin:-12.5em 0 0 69%; width:18.5%; }

Answer 1

通常你对图像做这样的事情：

img { width:100%; height:auto; -ms-interpolation-mode:bicubic; }

我发现自己有时也需要设置min-width，min-height最好在包含元素上进行（至少 IE7 存在height:auto最小/最大宽度和最小/最大宽度问题）

Answer 2

我相当肯定你可以通过调整“img”标签的宽度来解决问题，但在处理高度时也可以使用百分比。这是 W3C 公认的方法。W3C 学校的CSS 高度属性。