html - 带有背景图像的响应式 div 不起作用

问题描述

我有一个 div 容器，其中有两个带有背景图片的 div。我设置了 div 容器显示网格的样式并修复了一个比另一个大的 div。对于小屏幕尺寸，我希望 div 堆叠在顶部（或宽度为 100%）。想让它响应。但不工作。在原始代码中，我有更多的 div。这里我只包括了两个。

#main {
  height: 300px;
  display: grid;
  grid-template-columns: auto auto auto;
}

.sub {
  background-color: cadetblue;
  margin: 10px;
}

#one {
  grid-column-start: 1;
  grid-column-end: 3;
  background-image: url("https://image.shutterstock.com/image- 
 vector/floral-seamless-pattern-leaves-cordelia-600w- 1142315438.jpg");

}

#two {
  background-image: url(https://image.shutterstock.com/image- 
 photo/colorful-flower-on-dark-tropical-600w-721703848.jpg)
}

@media screen and (max-width: 600px) {
  #one,
  #two {
    width: 100%;
  }
}

<div id="main">
  <div class="sub" id="one">1</div>
  <div class="sub" id="two">2</div>

标签： htmlcssresponsive-design

我只会使用 flex-box，在我看来它更容易使用。如果您不希望它们堆叠在更大的屏幕尺寸上，只需添加一个媒体查询并将 flex-direction 更改为 row 即可。

body {
  margin: 0;
  padding: 0;
}

.sub{
  width: 100%;
  height: 500px; /** can be whatever height you want **/
  background-color: blue;
  margin-top: 20px;
  background-image: url("https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/suburban-house-royalty-free-image-1584972559.jpg?resize=980:*");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

<div class="main">
  <div class="sub" id="1"></div>
  <div class="sub" id="2"></div>
</div>

html - 带有背景图像的响应式 div 不起作用

问题描述

解决方案

推荐阅读