网格背景图像高度差距答案

【问题标题】：Grid background image height gap网格背景图像高度差距
【发布时间】：2020-06-28 05:20:21
【问题描述】：

我正在尝试构建一个三列两行的响应式图片库，最大宽度为 800 像素。当我定义背景图像的高度时，我想摆脱它所产生的差距。

.container {
  display:flex;
  justify-content:center;
    
}
.grid {
    max-width: 800px;
    display:grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 2px;
    width: 100%;
}
.img {
    width: 100%;
    height: 300px;
    background-image:url('https://source.unsplash.com/user/erondu/1600x900');
    background-repeat:no-repeat;
    background-size:contain;
    background-position:center;
}

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="trash.css">
    <title>Document</title>
</head>
<body>
    <div class="container">
        <div class="grid">
            <div class="img"></div>
            <div class="img"></div>
            <div class="img"></div>
            <div class="img"></div>
            <div class="img"></div>
            <div class="img"></div>
        </div>
    </div>
</body>
</html>

【问题讨论】：

标签： html css css-grid

【解决方案1】：

如果您使用bckground-size: contain，它将保持图像比例，并且不适用于高度。

如果您添加background-size: cover，它会正常工作。

试试这个

.img {
  background-size: cover;
}

【讨论】：

【解决方案2】：

然后不要将高度设置为300px

设置为自动

【讨论】：

我试过了，但它不起作用，它不会显示图像
你不加载 html 中的图像吗？ @CristianMarcos 但在 CSS 上
我试过你刚才说的，它确实有效。非常感谢！

【解决方案3】：

如果图像始终具有相同的比例，请使用填充技巧

.grid {
  max-width: 800px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 2px;
  width: 100%;
  margin: auto;
}

.img {
  padding-top: 56%;
  background-image: url('https://source.unsplash.com/user/erondu/1600x900');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

<div class="grid">
  <div class="img"></div>
  <div class="img"></div>
  <div class="img"></div>
  <div class="img"></div>
  <div class="img"></div>
  <div class="img"></div>
</div>

【讨论】：