css: CodePen Home Minimal Responsive Thumbnail Gallery (Grid & Masonry)

 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
	    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CodePen - Minimal Responsive Thumbnail Gallery (Grid & Masonry)</title>
		<meta name="Description" content="geovindu"/>
<meta name="Keywords" content="geovindu"/>
<meta name="author" content="geovindu"/>
  <script>
  if (document.location.search.match(/type=embed/gi)) {
    window.parent.postMessage("resize", "*");
  }
</script>


  <style>
    html { font-size: 15px; }
    html, body { margin: 0; padding: 0; min-height: 100%; }
    body { height:100%; display: flex; flex-direction: column; }
    .referer-warning {
      background: black;
      box-shadow: 0 2px 5px rgba(0,0,0, 0.5);
      padding: 0.75em;
      color: white;
      text-align: center;
      font-family: var(--cp-font-family);
      line-height: 1.2;
      font-size: 1rem;
      position: relative;
      z-index: 2;
    }
    .referer-warning h1 { font-size: 1.2rem; margin: 0; }
    .referer-warning a { color: #56bcf9; } /* $linkColorOnBlack */
	  
	  /** RESET **/
* {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	box-sizing: border-box;
}
html, body {
	height: 100%;
}




/** THUMBNAILS **/
.thumbnails {
  display: flex;
	flex-wrap: wrap;
}
.thumbnails a {
  flex-grow: 1;
  height: 200px;
  margin: 2px;
  border-radius: 2px;
  overflow: hidden;
}
.thumbnails img {
  min-width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s;
}
.thumbnails a:hover img {
  transform: scale(1.05);
}
  </style>
	

</head>

<body>
	<!-- Grid Layout (thumbnail images have same dimensions) -->
<div class="thumbnails">
	<a href="#"><img src="https://source.unsplash.com/featured/500x300/?man" alt=""></a>
	<a href="#"><img src="https://source.unsplash.com/featured/500x300/?woman" alt=""></a>
	<a href="#"><img src="https://source.unsplash.com/featured/500x300/?design" alt=""></a>
	<a href="#"><img src="https://source.unsplash.com/featured/500x300/?sky" alt=""></a>
	<a href="#"><img src="https://source.unsplash.com/featured/500x300/?tree" alt=""></a>
	<a href="#"><img src="https://source.unsplash.com/featured/500x300/?cat" alt=""></a>
	<a href="#"><img src="https://source.unsplash.com/featured/500x300/?dog" alt=""></a>
	<a href="#"><img src="https://source.unsplash.com/featured/500x300/?office" alt=""></a>
	<a href="#"><img src="https://source.unsplash.com/featured/500x300/?sea" alt=""></a>
	<a href="#"><img src="https://source.unsplash.com/featured/500x300/?green" alt=""></a>
	<a href="#"><img src="https://source.unsplash.com/featured/500x300/?fashion" alt=""></a>
	<a href="#"><img src="https://source.unsplash.com/featured/500x300/?architecture" alt=""></a>
	<a href="#"><img src="https://source.unsplash.com/featured/500x300/?art" alt=""></a>
	<a href="#"><img src="https://source.unsplash.com/featured/500x300/?style" alt=""></a>
	<a href="#"><img src="https://source.unsplash.com/featured/500x300/?animal" alt=""></a>
	<a href="#"><img src="https://source.unsplash.com/featured/500x300/?home" alt=""></a>
	<a href="#"><img src="https://source.unsplash.com/featured/500x300/?flower" alt=""></a>
	<a href="#"><img src="https://source.unsplash.com/featured/500x300/?grass" alt=""></a>
	<a href="#"><img src="https://source.unsplash.com/featured/500x300/?market" alt=""></a>
	<a href="#"><img src="https://source.unsplash.com/featured/500x300/?street" alt=""></a>
</div>

<br><br><br><br>

<!-- Masonry Layout (thumbnail images have random dimensions) -->
<div class="thumbnails">
	<a href="#"><img src="https://source.unsplash.com/featured/?man" alt=""></a>
	<a href="#"><img src="https://source.unsplash.com/featured/?woman" alt=""></a>
	<a href="#"><img src="https://source.unsplash.com/featured/?design" alt=""></a>
	<a href="#"><img src="https://source.unsplash.com/featured/?sky" alt=""></a>
	<a href="#"><img src="https://source.unsplash.com/featured/?tree" alt=""></a>
	<a href="#"><img src="https://source.unsplash.com/featured/?cat" alt=""></a>
	<a href="#"><img src="https://source.unsplash.com/featured/?dog" alt=""></a>
	<a href="#"><img src="https://source.unsplash.com/featured/?office" alt=""></a>
	<a href="#"><img src="https://source.unsplash.com/featured/?sea" alt=""></a>
	<a href="#"><img src="https://source.unsplash.com/featured/?green" alt=""></a>
	<a href="#"><img src="https://source.unsplash.com/featured/?fashion" alt=""></a>
	<a href="#"><img src="https://source.unsplash.com/featured/?architecture" alt=""></a>
	<a href="#"><img src="https://source.unsplash.com/featured/?art" alt=""></a>
	<a href="#"><img src="https://source.unsplash.com/featured/?style" alt=""></a>
	<a href="#"><img src="https://source.unsplash.com/featured/?animal" alt=""></a>
	<a href="#"><img src="https://source.unsplash.com/featured/?home" alt=""></a>
	<a href="#"><img src="https://source.unsplash.com/featured/?flower" alt=""></a>
	<a href="#"><img src="https://source.unsplash.com/featured/?grass" alt=""></a>
	<a href="#"><img src="https://source.unsplash.com/featured/?market" alt=""></a>
	<a href="#"><img src="https://source.unsplash.com/featured/?street" alt=""></a>
	<a href="#"><img src="https://source.unsplash.com/featured/?bird" alt=""></a>
</div>
<br><br><br><br>
	
</body>
</html>

　　图片自适应显示器大小排列个数

from: https://codepen.io/AkinBilgic/pen/LwZNJm

 

posted @ 2022-11-25 16:26  ®Geovin Du Dream Park™  阅读(42)  评论(0)    收藏  举报