Question

我正在尝试创建一个响应式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

Answer 1

提供的代码的主要问题是为width: 100%设置的img属性。将其更改为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>

响应式CSS网格图像库

1 个答案: