基于容器高度的响应图像

时间:2018-04-26 05:22:11

标签: html css twitter-bootstrap image background-image

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

在桌面模式下工作正常: enter image description here

在手机中我得到了这个: enter image description here

当我想要这个时: enter image description here

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

2 个答案:

答案 0 :(得分:0)

您可以使用media-queries

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

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

的更多信息

答案 1 :(得分:0)

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

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

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

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

我在此示例中使用的width: 100vwheight: 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;
    }
}

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