1

所以我使用引导卡以一种画廊的方式显示图像。我也使用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);

请帮忙！！！

4

1 回答 1

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>可见性是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>

如果您只希望s 在其上和下面启动，请添加d-md-none到类列表中。<img>sm

于 2020-05-20T00:51:09.207 回答