基于容器高度的响应图像

Question

我正在努力重新创建我的网站，我希望图片显示的大小可以对这些部分进行分类。我希望这些图像能够根据容器的高度做出响应。例如，如果容器高度为600像素，我希望无论宽度如何，图像都是600像素高。现在我正在使用background-size: contain;在桌面模式下工作，但在一定宽度后，图像开始变短，有利于保持容器的宽度。

在桌面模式下工作正常：

在手机中我得到了这个：

当我想要这个时：

我希望这是有道理的。另外请记住，这不是一个完成的概念所以它看起来很糟糕，因为即使我“破解”它在移动设备上工作

Answer 1

您可以使用media-queries：

@media only screen and (max-width: 600px) {
    img {
        background-size:cover;
    }
}

您可以详细了解media- queries：https://www.w3schools.com/css/css_rwd_mediaqueries.asp
您可以阅读有关background-size：https://www.w3schools.com/cssref/css3_pr_background-size.asp

的更多信息

Answer 2

在寻求帮助时，一件重要的事情就是尽最大努力尽可能地解释您的问题。例如，放置一部分代码就可以真正提高你的答案速度并解决你的问题。

话虽如此，我建议将你的css更改为以下内容：

.hero {
  width: 100vw;
  height: 100vh;
  background-image: url(../images/hero.jpg);
  background-size: cover;
  background-position: center, center;
}

background-size: cover和background-position: center将确保以移动设备的方式显示。然而，不一定完全是图像的那部分，也许你将不得不在图像编辑器上工作。

我在此示例中使用的width: 100vw和height: 100vh是图像为背景的容器的大小，这与图片的显示方式相关。 vw是视口宽度，vh是视口高度。此单元适用于处理响应式显示，因为它会考虑屏幕来确定您放入其中的任何样式的大小。

由于这已经按照您想要的方式在桌面上运行，我建议您使用媒体查询，这样您就只能更改它在移动设备中的显示方式，例如。

这就像是

@media only screen and (max-width: 480px) {
    .hero {
      width: 100vw;
      height: 100vh;
      background-image: url(../images/hero.jpg);
      background-size: cover;
      background-position: center, center;
    }
}

正如另一个答案中所建议的，请查看媒体查询，以选择哪一个适合您要实现的目标。您可以使用许多媒体查询，例如一个用于移动设备，一个用于平板电脑，一个用于桌面。