Question

我正在使用购买的Wordpress主题在一个客户的网站上工作（因此所有代码不一定是我的，但如果需要，我可以提取一些东西）。

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

我的问题：在桌面上，徽标将重新调整，WIDTH正常。但是我的一个客户正在一个非常广泛的浏览器窗口中查看（我认为这对所有用户来说都是不寻常的，但它是客户端！），并且徽标不会随着HEIGHT更改而重新缩放，因此它们会被边界切断包裹。

我尝试过像

这样的事情

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

这是主题开发人员最初提供的内容，也改变了50％到50vh（只是尝试了我在网上遇到的一些事情，而不是任何代码专家），以及此解决方案的变体HERE 没有运气。

我的（再次，部分）理解是因为没有明确设置背景图像的div的高度，我不能使用徽标/子元素的百分比高度，但有没有办法解决此？

我目前正在使用srcset来获取适合移动设备的徽标，但这不是一个完美的解决方案。我想也可能有一个javascript解决方案，但我只有75％左右的HTML＆amp;没有明确指示的JS和PHP并没有多少CSS。（称之为有能力，但缺乏经验）。

您可以查看问题HERE。

谢谢！

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

编辑：一位同事遇到了这个解决方案，这大大改善了事情。问题仍然发生在足够短的浏览器（IE浏览器观看等），但适用于更大范围的视口大小：

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

徽标现在垂直缩放到一个点，虽然视口高度仍然可以捕捉并切断它们，但处于更好的阈值（大约550px高，之前它发生在~720px高 - 现在远远超过正常人的最小浏览器大小，我的理解是~760px是平均值。

我试图将这与@ kburgie的代码建议结合起来，以使徽标完全位于绿色边框之上，但我的结果最终将徽标从页面顶部推下来，这更糟糕（对我来说，在横向Galaxy上） S3，我至少可以显示顶部徽标的主要方块，这对我来说足够了。）

感谢所有帮助过的人 - 我认为这可能是我现在可以提供的最佳解决方案！

Answer 1

似乎你应该能够组合宽度和高度媒体查询来捕捉边缘情况：

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

Answer 2

我没有足够的代表发表评论，或者我愿意。我认为isherwood的媒体查询太具体了。

响应式图像应该已经根据高度和宽度做出响应，处理它的最佳方法是使用图像宽度。

这是一个危险的选择器，你应该摆脱它：

img {
  height: 100%;
  width: auto;
}

它会影响您网站上的所有图片。你应该使用一个类。除此之外，您的图像已经设置为最大宽度：100％，这就是您所需要的。

专注于你的定位

第1步：删除上边距和下边

.home-section .container { margin: 0 auto; }

步骤2：将图像容器完全放在其父母的底部。然后它将始终保持在绿色边界之上。如果您只想在某个屏幕尺寸之上定位，请将其粘贴在媒体查询中。

.home-section-image {
  position: absolute;
  bottom: 10px;
 }