HTML/CSS Header 媒体查询

Question

我制作了一个作品集网站，header 图片有一些问题。在智能手机和 IPAD 视图中，完整的 header 图像不应显示 - 并且有效。在我的 PC 显示器（24 英寸）上它也能正常工作。但是在我的笔记本电脑（15 英寸）上，header 图像是孤立的。您只能看到图像的 40%。（解释截图如下）

1) 这是整个 header 图片。黑色背景和数字 3) 是一张 header 图片。

2) header 上的普通文本（不重要）

.hero_section {
  background-image: url(https://placekitten.com/1920/1080);
  background-repeat: no-repeat;
  background-position: center center;
  width: 100%;
  height: 100vh;
}

<section id="home" class="hero_section bd-bottom">
  <div class="display-table">
    <div class="table-cell">
    </div>
  </div>
</section>

现在我希望图像在 15 英寸显示器上也能完整显示。我给了图片：width: 100%;所以它应该可以正常工作。

有 link 来精确我的形象。点击 this

Answer 1

尝试添加类似这样的内容

.hero_section{
  background-size: cover;
}

Answer 2

这就是我要做的：

.hero_section {
  background-image: url(https://www.bilder-upload.eu/upload/c49546-1579636812.jpg);
  background-repeat: no-repeat;
  background-position: center right;
  width: 100%;
  height: 100vh;
}

@media screen and (max-width: 992px) {
   .hero_section {
      background-image: none;
      background-color: #000;
}

<section id="home" class="hero_section bd-bottom">
  <div class="display-table">
    <div class="table-cell">
    </div>
  </div>
</section>

这应该使您的 background-image 始终向右对齐，因为您的主要拍摄对象（拿着相机的人）就是这样对齐的。当您的屏幕较小（平板电脑或更小）时，您可以删除 background-image 并添加黑色背景（根据需要调整十六进制颜色）

HTML/CSS Header 媒体查询

HTML/CSS Header Media Queries

html

css

media-queries