Css 如何阻止图像在特定浏览器高度/宽度下调整大小

这是CSS脚本

img {
  max-width: 50vw;
  width: 50%;
}

情况是这样的

调整右下角正方形的宽度，直到在页面底部看到图像的底部

现在，减小宽度，直到您注意到图像底部比页面底部短

我想要的是，一旦图像的高度到达页面底部，它就停止调整大小，这样当图像变小时，就会出现一个滚动条

---

我认为最大宽度可能是这个问题的答案。

如果我理解正确，您希望：

• 使图像宽度为父对象的50%（因此，当窗口收缩时，图像也会收缩）
• 停止将高度缩小为任意时刻
• 执行此操作时保持图像比例

在这种情况下，恐怕你不能这样做，因为在不降低高度的情况下，缩小图像的宽度和保持比例是不可能的。你必须决定是让图像始终保持50%的大小，还是让图像保持你想要的高度（我认为扭曲图像不是一个选项）

但是，如果你只是想让图像尽可能高，保持比例，只需按照评论的建议，固定图像高度，将宽度保留为自动

正文{
保证金：0；
填充物：5px；
}
#图像容器{
保证金：0；
填充：0；
高度：计算（100vh-10px）；/*根据您的边距/填充量根据需要进行更改*/
}
#形象{
身高：100%；
}

---

如果我理解正确，您需要：

• 使图像宽度为父对象的50%（因此，当窗口收缩时，图像也会收缩）
• 停止将高度缩小为任意时刻
• 执行此操作时保持图像比例

在这种情况下，恐怕你不能这样做，因为在不降低高度的情况下，缩小图像的宽度和保持比例是不可能的。你必须决定是让图像始终保持50%的大小，还是让图像保持你想要的高度（我认为扭曲图像不是一个选项）

但是，如果你只是想让图像尽可能高，保持比例，只需按照评论的建议，固定图像高度，将宽度保留为自动

正文{
保证金：0；
填充物：5px；
}
#图像容器{
保证金：0；
填充：0；
高度：计算（100vh-10px）；/*根据您的边距/填充量根据需要进行更改*/
}
#形象{
身高：100%；
}

我在“一旦它的宽度到达页面底部”中失去了你。对不起-我指的是宽度调整以使图像到达页面底部时的高度。那么

高度：100 vh？（并删除宽度参数）我需要保持一个由宽度为50vw给定的比例，我在“一旦它的宽度到达页面底部”时丢失了您对不起-我指的是宽度调整以使图像到达页面底部时的高度？（并删除宽度参数）我需要保持宽度为50vw的给定比例，如果我使用最大高度：calc（100vh-166px）；而不是最大宽度：50vw。。在@media（max height 50vw）{}这一点上，我如何阻止图像重新调整大小？您要实现什么？有一个尽可能高但有一些垂直边距的图像，并且高度不小于视口的一半？我有一个高度为800px的图像-我希望它停止作为浏览器调整大小-如果浏览器屏幕的高度（h）小于（w/2），停止缩放/缩小并开始使用滚动条，-所以，我有一个@media（max height 50vw），我想你终于明白了，你所尝试的是行不通的，因为它会将最大高度始终设置为50vw，不管高度是多少。根据您的解释，您需要一个基于浏览器窗口当前宽度和高度关系的条件规则，而据我所知，您不能仅使用CSS来实现这一点（尽管我认为您可以使用JS来实现）。我是否可以添加一个“min height:variable”（最小高度：变量），以防止它再按照max height:calc收缩（100vh-166px）；宽度：自动；高度：自动；如果我使用最大高度：calc（100vh-166px）；而不是最大宽度：50vw.。我如何在@media（最大高度50vw）{你想实现什么？拥有一个尽可能高但有一些垂直边距的图像，并且高度不小于视口的一半？我有一个高度为800px的图像-我希望它停止作为浏览器调整大小-如果浏览器屏幕的高度（h）小于（w/2），停止缩放/收缩并开始使用滚动条，-所以，我有这个@media（最大高度50vw）我想你终于明白了，你所尝试的是行不通的，因为无论高度是多少，它都会将最大高度设置为50vw。根据你的解释，你需要一个基于浏览器窗口当前宽度和高度关系的条件规则，而据我所知，你不能仅使用CSS（尽管我认为你可以用JS来实现这一点）我能不能添加一个“min height:variable；”来防止它再按照最大高度收缩：calc（100vh-166px）；width:auto；height:auto；