css布局实现图片墙效果代码-html代码-BFW代码库

css布局实现图片墙效果代码

代码语言：html

代码描述：css布局实现图片墙效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
  
<style>
/* THE GRID STUFF */

.supporter-list {
	display: grid;
	gap: 4px;
	grid-auto-flow: row dense;
	grid-template-columns: repeat(auto-fill, 40px);

	a {
		&.gold {
			grid-column: span 2;
			grid-row: span 2;
		}

		img {
			display: block;
		}
	}
}

/* OTHER STYLE STUFF */

:root {
	--bg: #18151f;
	--text-muted: #79777e;
}

body {
	background: var(--bg);
	color: var(--text-muted);
	display: flex;
	flex-direction: column;
	font-family: system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
		"Segoe UI Symbol";
	gap: 20px;
	min-block-size: 100dvb;
	place-content: center;
	place-items: center;
}

p {
	margin: 0;
}

a {
	color: inherit;
}

.supporter-list {
	inline-size: 100%;
	justify-content: start;
	max-inline-size: 480px;

	a {
		border-radius: 3px;
		opacity: 0.85;
		outline: 1px solid transparent;
		transition-duration: 150ms;
		transition-timing-function: linear;
		transition-property: outline-color, opacity;

		&:has(:hover, :active, :focus) {
			opacity: 1;
			outline: 1px solid var(--text-muted);
		}
	}

	img {
		border-radius: 3px;
	}
}
</style>

  
</head>

<body translate="no">
 <div class="supporter-list">
    <a href="#" title="T D">
        <img alt="T D" loading="lazy" decoding="async" sizes="(min-width: 80px) 80px, 100vw" style="
                object-fit: cover;
                max-width: 80px;
                max-height: 80px;
                aspect-ratio: 1;
                width: 100%;
            " src="//repo.bfw.wiki/random/80x80/景色?rand=1740532069183" /> </a><a href="#" title="Jeremy Morgan">
        <img alt="Jeremy Morgan" loading="lazy" decoding="async" sizes="(min-width: 80px) 80px, 100vw" style="
                object-fit: cover;
                max-width: 80px;
                max-height: 80px;
                aspect-ratio: 1;
                width: 100%;
            " src="//repo.bfw.wiki/random/80x80/景色?rand=1745800599206" /> </a><a href="#" title="Jeremy Schroeder">
        <img alt="Jeremy Schroeder" loading="lazy" decoding="async" sizes="(min-width: 80px) 80px, 100vw" style="
                object-fit: cover;
                max-width: 80px;
                max-height: 80px;
                aspect-ratio: 1;
                width: 100%;
            " src="//repo.bfw.wiki/random/80x80/景色?rand=1743614691481" /> </a><a href="#" title="Charles Villard">
        <img alt="Charles Villard" loading="lazy" decoding="async" sizes="(min-width: 80px) 80px, 100vw" style="
                object-fit: cover;
                max-width: 80px;
                max-height: 80px;
                aspect-ratio: 1;
                width: 100%;
            " src="//repo.bfw.wiki/random/80x80/景色?rand=1743739783203" /> </a><a href="#" title="Bryan Robinson">
        <img alt="Bryan Robinson" loading="lazy" decoding="async" sizes="(min-width: 80px) 80px, 100vw" style="
                object-fit: cover;
                max-width: 80px;
                max-height: 80px;
                aspect-ratio: 1;
                width: 100%;
            " src="//repo.bfw.wiki/random/80x80/景色?rand=1741105857842" /> </a><a href="#" title="Joe Tannenbaum">
        <img alt="Joe Tannenbaum" loading="lazy" decoding="async" sizes="(min-width: 80px) 80px, 100vw" style="
                object-fit: cover;
                max-width: 80px;
                max-height: 80px;
                aspect-ratio: 1;
                width: 100%;
            " src="//repo.bfw.wiki/random/80x80/景色?rand=1743786396799" /> </a><a href="#" title="Nik McLaughlin">
        <img alt="Nik McLaughlin" loading="lazy" decoding="async" sizes="(min-width: 80px) 80px, 100vw" style="
                object-fit: cover;
                max-width: 80px;
                max-height: 80px;
                aspect-ratio: 1;
                width: 100%;
            " src="//repo.bfw.wiki/random/80x80/景色?rand=1741111804527" /> </a><a href="#" title="Ryan McGovern">
        <img alt="Ryan McGovern" loading="lazy" decoding="async" sizes="(min-width: 80px) 80px, 100vw" style="
                object-fit: cover;
                max-width: 80px;
                max-height: 80px;
                aspect-ratio: 1;
                width: 100%;
            " src="//repo.bfw.wiki/rand.........完整代码请登录后点击上方下载按钮下载查看