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

我有一个两部分标题。左侧20％拥有图片（我们的徽标），右侧80％是导航等。跨不同分辨率的图像大小问题

标题本身及其任一部分的宽度用百分比表示。高度用em表示。这导致流畅的布局。唯一有问题的地方就是标识 - 因为它与容器尺寸不一样，因此它会在某些分辨率下完美匹配，挤压得太小而在其他分辨率上被迫上升。

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

无论分辨率如何，我怎样才能确保徽标填满整个容器？

2011-05-11 AKor

您也会给徽标设置一个百分比宽度（可能100％填充容器）。请记住，在这样做的时候，你会受到浏览器的图像缩放能力的束缚，在某些情况下可能会产生不太理想的结果。这就是说，它听起来像是用两个完全不同的变量进行缩放：基于视口宽度的水平缩放以及基于字体大小设置的垂直缩放。虽然我赞赏您的灵活性目标，但可能需要重新考虑扩大徽标本身的需求。并非页面上的所有内容都需要扩展。

来源

2011-05-11 02:42:15

图像已经有百分比宽度。你是说我应该让头部有一个绝对的像素高度和宽度？或者我应该把它做成一个百分比高度（根据我的经验，这很难合作）？ – AKor 2011-05-11 02:46:24

您正在不成比例地调整高度和宽度。因此，我看不出用CSS单独扩展徽标图像的简单方法。您可以使用JS ...获取容器的高度和宽度，然后根据容器的高宽比计算图像应该处于什么比例以适合最佳尺寸。但是，对于看起来更像是视觉设计问题的人来说，这看起来像是许多复杂的技术。 – 2011-05-11 02:56:20

作为最简单的解决方案，您会提出什么建议？ – AKor 2011-05-11 03:16:47

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

来源

2011-05-11 03:13:49 kei

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

回答

相关问题