Question

我正在使用CSS网格，模板如下：

  grid-template-columns: 70% 30%;
  grid-template-areas:
    "hero info"
    "hero map"
    "home home";

在英雄中有一个图像，并且在移动窗口以检查响应性时，图像到达的高度比网格允许的高度短。有什么办法可以使“信息”和“地图”部分与图像一起缩小？我想像一下，我需要调整div的大小而不是调整图像的大小，但是到目前为止，什么都没起作用。

Here is the space that I'm referring to，当浏览器窗口缩小时，会出现此空白。

Here is the codepen

代码段在下面。我确实有一个媒体查询，因此布局会随着浏览器的变小而改变，但是目前这是在断点之前发生的。我想知道是否可以在不改变媒体查询断点的情况下完成这项工作。

body,
html {
  margin: 0;
  padding: 0;
}

/*navbar for window viewing purposes */
nav {
  height: 41px;
  background-color: rgba(200, 200, 200, 0.5);
}

.home-wrapper {
  background-color: #e6e6e6;
  width: 100%;
  grid-area: home;
}
.home-container {
  width: 80%;
  margin: auto;
  padding-bottom: 40px;
}

#main-map {
  grid-area: map;
  
  max-width: 96%;
  max-height: 100%;
  position: relative;
  overflow: hidden;
  padding-top: 56.25%;
}
#main-map iframe {
  display: block;
  
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;

   padding: 0px 5px 0px 5px;
}
#info {
  margin: 10px;
  grid-area: info;
}

.hero {
  margin: auto;
  max-width: 1940px;
  position: relative;
  grid-area: hero;
}

.hero img {
  display: block;
  
  height: auto;
  width: 100%;
  object-fit: cover;
  object-position: center;
}

.home {
  display: grid;
  grid-template-columns: 70% 30%;
  grid-template-areas:
    "hero info"
    "hero map"
    "home home";
}


/* Query */
@media (max-width: 1040px){
  .home {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "hero hero"
    "home home"
    "info map";
}

<nav>
  
</nav>
<div class="home">
    <div class="hero" >
      <img src="https://picsum.photos/1164/560"> 
      <span></span>
    </div>
            <div id="info">
            <p>
   
              Location address <br><br>
              1111 Main Street <br />
              Salt Lake City, UT 11111 <br /><br />

             P.O. Box 111 <br />
              Sale Lake City, UT 11111 <br /><br />

              111.111.1111 <br />
              Fax 111.111.1111 <br />
            </p>
            </div>
      <div id="main-map">
            <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3007.5980492403837!2d-112.45179968409789!3d41.077778023093046!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zNDHCsDA0JzQwLjAiTiAxMTLCsDI2JzU4LjYiVw!5e0!3m2!1sen!2sus!4v1574099632743!5m2!1sen!2sus" frameborder="0" style="border:0;"></iframe>
      </div>


    <div class="home-wrapper">
    <div class="home-container">
          <div id="home-about">
            <h3>Our Business</h3>
            <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem, necessitatibus.
              states. <br /><br />
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt atque, facilis deleniti eius non culpa delectus? Eos placeat sit alias!
              <br /><br />
          orem ipsum dolor sit amet consectetur adipisicing elit. Sunt atque, facilis deleniti eius non culpa delectus? Eos placeat sit alias!
              <br /><br />
             Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis repudiandae temporibus ut! Esse asperiores libero eum quia, optio nostrum commodi similique consequuntur ad sapiente saepe suscipit provident, molestias est quisquam qui culpa nihil totam earum. Officia aliquam praesentium rerum beatae.
              <br /><br />
             Our Business <br /><br />
              Salt Lake City Utah
            </p>
            <form action="contact.html">
              <button class="btn btn3">Contact Us</button>
            </form>
          </div>
      </div>
    </div>
    </div>

Answer 1

使用object-fit：fill或object-fit：cover似乎对我有帮助。尽管我与Codepen出现了奇怪的不一致之处。请告诉我是否有帮助。

.hero {
  max-width: 1940px;
  position: relative;
  grid-area: hero;
}

.hero img {
  display: block;
  height: 100%;
  width:100%;
  object-fit: fill;
  object-position: center;
}

我可以根据CSS网格中的图像运动使网格响应吗？

1 个答案: