响应式 css 网格图像库答案

【问题标题】：Responsive css grid image gallery响应式 css 网格图像库
【发布时间】：2019-03-20 21:38:59
【问题描述】：

我正在尝试创建一个响应式 css 网格图片库。我在容器内的 html 中有 18 个 div。我给他们上了不同的课。我遇到的第一个问题是我想用一类垂直来跨越第一张图像。正如您在我的 css 中看到的，我添加了 grid-column: span 2;到类.vertical。当我这样做时，图像跨越两列，但图像会调整大小并在垂直和水平方向上变大。我只想将它水平跨越两个网格。现在到第二个问题。当我在具有 .vertical 类的图像上使用 grid-row:span 2 时，下面的图像会向上移动，但具有垂直类的图像根本不会垂直跨越。我将在下面提供我的代码。感谢您的指导。

img{
	width:100%;
	height:auto;
}

 .container{
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
   grid-gap: 5px;
   
  
 }

 
 .horizontal{
 	grid-column:span 2;
	
}
.vertical{
	grid-row:span 2;
}

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>

  <div class="container">
    <div class="horizontal"><img src="christian.jpg"></div>
     <div class="vertical"><img src="1.jpg"></div>
      <div class="tva"><img src="2.jpg"></div>
       <div class="tre"><img src="3.jpg"></div>
       <div class="fyra"><img src="4.jpg"></div>
       <div class="fem"><img src="5.jpg"></div>
       <div class="sex"><img src="6.jpg"></div>
       <div class="sju"><img src="7.jpg"></div>
       <div class="vertical"><img src="christian.jpg"></div>
       <div class="ett"><img src="1.jpg"></div>
       <div class="tva"><img src="2.jpg"></div>
       <div class="tre"><img src="3.jpg"></div>
       <div class="fyra"><img src="4.jpg"></div>
       <div class="fem"><img src="5.jpg"></div>
       <div class="sex"><img src="6.jpg"></div>
       <div class="sju"><img src="7.jpg"></div>
       <div class="sex"><img src="6.jpg"></div>
       <div class="sju"><img src="7.jpg"></div>
       
     </div>

</body>
</html>

image

【问题讨论】：

尝试将图像更改为max-width:100% - 否则你是在强迫它。

标签： html css css-grid

【解决方案1】：

您提供的代码的主要问题是您为img 设置的width: 100% 属性。将其更改为 max-width 将不允许图像扩展到列/行之外。我还将object-fit: cover 添加到img，以便它们适当地填充空间。

img{
    object-fit: cover;
    max-width: 100%;
    height: auto;
}

.container{
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
   grid-gap: 5px;
}

.horizontal{
   grid-column: span 2;
}
.vertical{
   grid-row: span 2;
}

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>

  <div class="container">
    <div class="horizontal"><img src="http://placekitten.com/1000/500"></div>
     <div class="vertical"><img src="http://placekitten.com/500/1000"></div>
      <div class="tva"><img src="http://placekitten.com/400/400"></div>
       <div class="tre"><img src="http://placekitten.com/400/400"></div>
       <div class="fyra"><img src="http://placekitten.com/400/400"></div>
       <div class="fem"><img src="http://placekitten.com/400/400"></div>
       <div class="sex"><img src="http://placekitten.com/400/400"></div>
       <div class="sju"><img src="http://placekitten.com/400/400"></div>
       <div class="vertical"><img src="http://placekitten.com/500/1000"></div>
       <div class="ett"><img src="http://placekitten.com/400/400"></div>
       <div class="tva"><img src="http://placekitten.com/400/400"></div>
       <div class="tre"><img src="http://placekitten.com/400/400"></div>
       <div class="fyra"><img src="http://placekitten.com/400/400"></div>
       <div class="fem"><img src="http://placekitten.com/400/400"></div>
       <div class="sex"><img src="http://placekitten.com/400/400"></div>
       <div class="sju"><img src="http://placekitten.com/400/400"></div>
       <div class="sex"><img src="http://placekitten.com/400/400"></div>
       <div class="sju"><img src="http://placekitten.com/400/400"></div>
       
     </div>

</body>
</html>

【讨论】：