javascript - 使图像响应高度和宽度

Question

我正在为客户开发一个网站，使用购买的 Wordpress 主题(因此所有代码不一定都是我的，但如果需要我可以提取一些东西)。

着陆页具有响应式背景图片。最重要的是，我需要使用图像来显示相关 Logo (我输入的字段用于文本，但它们允许图像没有问题)。该图像周围也有边框，然后人们可以从那里向下滚动以查看其余内容。

我的问题:在桌面上， Logo 会随着宽度的变化而重新缩放。但是我的一个客户正在一个非常宽的浏览器窗口中查看(我认为这对所有用户来说都是不寻常的，但它是客户端!)，并且 Logo 不会随着 HEIGHT 的变化而重新缩放，所以它们被边框切断了裹。

我试过类似的东西

.home-section img {
max-height: 50%;
}    

这是主题开发人员最初提供的内容，并将 50% 更改为 50vh(只是尝试一些我在网上遇到的东西，无论如何都不是代码专家)，也是此解决方案的变体 HERE 没有运气。

我(再次，部分)的理解是，由于没有明确设置带有背景图像的 div 的高度，我不能为 Logo /子元素使用百分比高度，但是有没有办法解决这个？

我目前正在使用 srcset 为移动设备设置合适大小的 Logo ，但这不是一个完美的解决方案。我认为也可能有一个 javascript 解决方案，但我只有大约 75% 的人使用 HTML 和 CSS，而在没有明确指示的情况下，我使用 JS/PHP 的人不多。 (称它有能力，但缺乏经验)。

可以查看问题HERE .

谢谢!

============================================= ==

编辑: 一位同事遇到了这个解决方案，它大大改善了事情。该问题仍然会在足够短的浏览器(IE 横向手机查看等)中发生，但适用于更大范围的视口(viewport)大小:

div.home-section-image {
    min-width: 600px;
    max-width: 1080px;
    min-height: calc(690px * (90/150));
    height: 100vh;
    width: 100vh;
}

Logo 现在垂直缩放到一个点，尽管视口(viewport)高度仍然可以捕捉到它们并将它们切断，但处于更好的阈值(约 550 像素高，之前发生在约 720 像素高 - 现在远远超出正常范围人的最小浏览器大小，我的理解是平均 ~760px)。

我试图将它与@kburgie 的代码建议结合起来，使 Logo 完全位于绿色边框之上，但我的结果最终将 Logo 推离了页面的顶部，这更糟(对我来说，在水平的 Galaxy 上S3，我至少可以让顶部标志的主方 block 显示出来，这对我这个尺寸来说已经足够了)。

感谢所有提供帮助的人 - 我认为这可能是我目前可以提出的最佳解决方案!

Answer 1

看起来你应该能够结合宽度和高度媒体查询来捕捉边缘情况:

@media (min-width: 1200px) and (max-height: 500px) {
    .home-section img {
        height: 200px;
        width: auto;
    } 
}