不同分辨率下的图像大小调整问题

Question

我有一个由两部分组成的标题。左边20％有一个图像（我们的标识），右边80％是导航等。

标题本身的宽度以及它的任何一部分用百分比表示。高度用em表示。这导致了非常流畅的布局。唯一有问题的区域是徽标 - 因为它与容器的尺寸不同，它将在某些分辨率下完美贴合，到挤压太小而在其他分辨率上被迫顶起。

应用于图像的唯一CSS是容器内的宽度和边距。

无论分辨率如何，我如何确保徽标填满整个容器？<​​/ p>

Answer 1

您也会给徽标一个百分比宽度（可能100％填充容器）。请记住，在这样做时，您将受到浏览器图像缩放功能的支配，在某些情况下可能会产生不太理想的结果。

也就是说，听起来你正在缩放两个完全不同的变量：基于视口宽度的水平缩放和基于字体大小设置的垂直缩放。虽然我赞赏你的灵活性目标，但可能需要重新考虑扩展徽标本身的需求。并非页面上的所有内容都需要扩展。

Answer 2

您可能需要考虑为图片或其容器添加最小宽度，以确保它仅在某种程度上被“挤压”。