我正在制作一个响应式设计网站。我想要做的是让我的 Logo 始终具有窗口 15% 的高度。这会导致移动设备出现问题，因为我的 Logo 有点长。
我希望 Logo 在水平空间用完时开始缩小。这是我目前所拥有的:
<img style="height: 15%; max-width: 100%" src="logo.png"/>
这在普通屏幕上看起来不错，但是当我向下缩小时，它会水平收缩，但不会垂直收缩( Logo 恰好在右侧有几个像素的 alpha):
如您所知，这不是我们想要的，在这种情况下，我希望高度与宽度成比例。
最佳答案
在这种情况下，我强烈建议使用媒体查询。
您可以使用媒体查询来更改不同分辨率的属性值。
找到您的 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;
}
你仍然可以在媒体查询中使用百分比或像素，只是尝试一下直到它看起来不错:)
关于html - 图片高度15%，当屏幕尺寸小于图片宽度wide时，scale height？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35543626/