Css 跨不同分辨率的图像大小问题

我有一个两部分的标题。左边20%是我们的标志，右边80%是导航，等等

页眉本身的宽度以及其中任何一部分的宽度都用百分比表示。高度用em表示。这使得布局非常流畅。唯一有问题的地方是徽标-因为它与容器的尺寸不同，它将从在某些分辨率下完美匹配，到被挤压得太小，并被迫在其他分辨率上居于顶部

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

---

如何确保徽标填充整个容器而不考虑分辨率？

您应该为徽标指定一个百分比宽度，以及可能100%填充容器的宽度。请记住，在这样做的过程中，浏览器的图像缩放能力会让您处于不利地位，在某些情况下，这可能会产生不理想的结果

---

也就是说，听起来像是使用两个完全不同的变量进行缩放：基于视口宽度的水平缩放和基于字体大小设置的垂直缩放。虽然我为你的灵活性目标喝彩，但也许应该重新考虑一下扩大标志本身的必要性。并非页面上的所有内容都需要缩放

> P>你可能想考虑在图像或容器中添加一个最小宽度，以确保它只在一定程度上被挤压。

图像已经有一个百分比宽度。你是说我应该让标题有一个绝对的像素高度和宽度？或者我应该将其设置为一个百分比高度，而根据我的经验，这个百分比更难使用？您正在不成比例地缩放高度和宽度。因此，我看不到简单的方法来缩放你的标志图像与CSS单独。您可以使用JS…获取容器的高度和宽度，然后根据容器的纵横比计算图像的最佳比例。但这似乎是一项复杂的技术，更像是一个视觉设计问题。你认为最简单的解决方案是什么？最简单的解决方案是重新设计标题的外观和布局，这样就不需要对徽标进行缩放以使其外观良好。但是我说，作为一个做很多视觉/标志设计的人，我在这个方向上有偏见。也就是说，很少有网站能够像这样扩展品牌元素。我猜其他人也尝试过，也放弃了。如果您可以展示一个模型或链接到您的网站，我们可以提供更具体的答案/建议。