html - 图片高度15%，当屏幕尺寸小于图片宽度wide时，scale height？

Question

我正在制作一个响应式设计网站。我想要做的是让我的 Logo 始终具有窗口 15% 的高度。这会导致移动设备出现问题，因为我的 Logo 有点长。

我希望 Logo 在水平空间用完时开始缩小。这是我目前所拥有的:

<img style="height: 15%; max-width: 100%" src="logo.png"/>

这在普通屏幕上看起来不错，但是当我向下缩小时，它会水平收缩，但不会垂直收缩( Logo 恰好在右侧有几个像素的 alpha):

如您所知，这不是我们想要的，在这种情况下，我希望高度与宽度成比例。

Answer 1

在这种情况下，我强烈建议使用媒体查询。

您可以使用媒体查询来更改不同分辨率的属性值。

找到您的 Logo 切断的断点，使用媒体查询在您的 Logo 上设置 max-width 和 max-height。

您需要通过为其分配一个 ID 来专门定位您的 Logo ，如下所示:

<img src="logo.png" id="logo">

然后，对 Logo 使用媒体查询。此示例设置您的 Logo 在常见移动设备上的最大高度和宽度:

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
#logo {
max-width:20px;
max-height: 20px;
}

你仍然可以在媒体查询中使用百分比或像素，只是尝试一下直到它看起来不错:)