Question

[！[当前结果（注意：图片太大，无法在此处发布，但只需想象所有带列的图片都运行到窗口底部

.wrapper {
	display: grid;
	grid-gap: 5px;
	grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
	grid-auto-rows: 75px;
}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>CSS Grid</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<div class="wrapper">
		<div class="vertical"><img src="img/p1.jpeg" alt=""></div>
		<div class="horizontal"><img src="img/p15.jpeg" alt=""></div>
		<div><img src="" alt=""><img src="p2.jpeg" alt=""></div>
		<div class="vertical"><img src="img/p14.jpeg" alt=""></div>
		<div><img src="img/p3.jpeg" alt=""></div>
		<div><img src="img/p4.jpg" alt=""></div>
		<div class="horizontal"><img src="img/p7.jpeg" alt=""></div>
		<div><img src="img/p8.jpeg" alt=""></div>
		<div class="vertical"><img src="img/p9.jpeg" alt=""></div>
	</div>
</body>
</html>

我的代码与视频中的代码相同，实际上，一切都很容易，直到我到达这里。这是视频的链接-https://www.youtube.com/watch?v=t6CBKf8K_Ac&t=1952s。我在29:55

] 2] 2

Answer 1

我不知道视频中是否有提及，而是添加...

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

...到您的图像都变得类似于您想要的结果！

.wrapper {
    display: grid;
    grid-gap: 5px;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    grid-auto-rows: 75px;
}
img{
    height:100%;
    width:100%;
    object-fit:cover;
}

<div class="wrapper">
    <div class="vertical"><img src="https://picsum.photos/100/75" alt=""></div>
    <div class="horizontal"><img src="https://picsum.photos/100/75" alt=""></div>
    <div><img src="https://picsum.photos/100/75" alt=""></div>
    <div class="vertical"><img src="https://picsum.photos/100/75" alt=""></div>
    <div><img src="https://picsum.photos/100/75" alt=""></div>
    <div><img src="https://picsum.photos/100/75" alt=""></div>
    <div class="horizontal"><img src="https://picsum.photos/100/75" alt=""></div>
    <div><img src="https://picsum.photos/100/75" alt=""></div>
    <div class="vertical"><img src="https://picsum.photos/100/75" alt=""></div>
</div>

试图从youtube复制css网格图像库，但被卡住

1 个答案: