如何在移动设备上使引导卡卡高响应

Question

所以我使用引导卡以一种画廊的方式显示图像。我还使用card-tall 来设置我的图像样式。这些图片是海报，您可能猜到这意味着它们占用了大量空间。

在网站上是这样的：

但在移动设备上看起来像这样：

这是海报的html，它包含在div中

 <div id = "all" class="photo-grid">
       <div class="card card-tall" style="background-image:url(./img/portfolio/poster1.jpg)" >
       </div>
       <div class="card card-tall" style="background-image:url(./img/portfolio/poster4.jpg)">
       </div>
</div>

和我的 CSS

* {
  box-sizing: border-box;
}
body {
  background: #fff;
  color: #fff;
  font-family: "Noto Sans", sans-serif;

}
.photo-grid {
  height: 100%;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  grid-auto-rows: 240px;
  margin-right: 10%;
  margin-left: 10%;
  margin-bottom: 3rem;
}
.card {
  height: 100%;
  width: 100%;
  border-radius: 4px;
  transition: transform 200ms ease-in-out;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

@media screen and (min-width: 600px) {
  .card-tall {
    grid-row: span 2 / auto;
  }
  .card-wide {
    grid-column: span 2 / auto;
  }
}



/* import fonts  */ 
 @import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap'); 

/* css variables */ 
@import url(./partials/_variables.css); 

/* import global styling */ 
@import url(./partials/_global.css);

请帮忙！！！

Answer 1

HTML 中的图像有两个主要用例：

• background-image - 不被视为内容，它们在元素的边界内呈现，而不设置其大小
• 常规图像：<img>s - 它们被视为内容，除其他外，它们设置父级的大小（当未从流中取出时，使用 position），这似乎是您想要的.

使元素具有精确的高度以显示图像而不被裁剪的最简单方法是实际使用背景图像作为<img>：

<div class="card card-tall" style="background-image:url(./img/portfolio/poster1.jpg)" >
  <img src="./img/portfolio/poster1.jpg">
</div>

...结合这个CSS：

.card-tall img {
  display: inline-block;
  width: 100%;
  height: auto;
  visibility: hidden;
}

现在图像将在那里，设置卡片的比例，但您将看到的仍然是background-image，因为<img>s 的可见性是hidden - 未渲染。

另请注意，这不会给页面增加任何额外的权重。由于资源完全相同，当它为background-image 加载时，它也为<img> 加载。

如果您只希望在特定的响应时间间隔上出现这种行为，请将上述 CSS 包装到适当的 @media 查询中。

---

为避免自定义 CSS，请将这些类应用于 <img>：

<img src="./img/portfolio/poster1.jpg"
     class="d-inline-block w-100 h-auto invisible">

缺点是每个（像大多数 Bootstrap 实用程序类一样）都带有!important。对于响应性，如果您不希望图像显示在md 及以上，请使用d-md-none 类（这是一个示例，将其更改为您需要的，如果：d-sm-none，d-lg-none...）。

---

附注：您也可以使用此 jQuery 脚本以编程方式添加图像：

$(function() {
  $('.card-tall').each(function() {
    $(this).append($('<img />', {
      class: 'd-inline-block w-100 h-auto invisible',
      src: $(this).css('backgroundImage').replace('url("', '').replace('")', '')
    }))
  })
})

看看它的工作原理：

$(function() {
  $('.card-tall').each(function() {
    $(this).append($('<img />', {
      class: 'd-inline-block w-100 h-auto invisible',
      src: $(this).css('backgroundImage').replace('url("', '').replace('")', '')
    }))
  })
})

.card-tall {
  background-size: contain;
  background-repeat: none;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

<div class="container">
  <div class="row">
    <div class="col-sm-4">
      <div class="card card-tall" style="background-image:url(https://picsum.photos/200/200)"></div>
    </div>
    <div class="col-sm-4">
      <div class="card card-tall" style="background-image:url(https://picsum.photos/200/300)"></div>
    </div>
    <div class="col-sm-4">
      <div class="card card-tall" style="background-image:url(https://picsum.photos/300/200)"></div>
    </div>
  </div>
</div>

如果您只希望<img>s 在sm 及以下级别开始使用，请将d-md-none 添加到类列表中。