流体CSSギャラリー
4269 ワード
今日、我々はギャラリーの列がイメージの高さに従って敏感である流体イメージギャラリーを実行する方法を学ぶつもりです.
ここで、我々は反応を成し遂げるために、CSS Flexを使用しています.
我々は、ワイドスクリーンと小さな画面の1つの列の3つの列を使用します.
最終結果
コディン
HTMLコード
ここで、我々は反応を成し遂げるために、CSS Flexを使用しています.
我々は、ワイドスクリーンと小さな画面の1つの列の3つの列を使用します.
最終結果
コディン
HTMLコード
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="index.css">
<title>Fluid CSS Gallery</title>
</head>
<body>
<div class="row">
<div class="column">
<img
src="https://images.pexels.com/photos/1108099/pexels-photo-1108099.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
alt=""
/>
<img
src="https://images.pexels.com/photos/38867/pexels-photo-38867.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
alt=""
/>
<img
src="https://images.pexels.com/photos/406014/pexels-photo-406014.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
alt=""
/>
<img
src="https://images.pexels.com/photos/1378849/pexels-photo-1378849.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
alt=""
/>
</div>
<div class="column">
<img
src="https://images.pexels.com/photos/1389994/pexels-photo-1389994.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
alt=""
/>
<img
src="https://images.pexels.com/photos/1254140/pexels-photo-1254140.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
alt=""
/>
<img
src="https://images.pexels.com/photos/320014/pexels-photo-320014.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
alt=""
/>
</div>
<div class="column">
<img
src="https://images.pexels.com/photos/39317/chihuahua-dog-puppy-cute-39317.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
alt=""
/>
<img
src="https://images.pexels.com/photos/1805164/pexels-photo-1805164.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
alt=""
/>
<img
src="https://images.pexels.com/photos/1452717/pexels-photo-1452717.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
alt=""
/>
<img
src="https://images.pexels.com/photos/129634/pexels-photo-129634.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
alt=""
/>
</div>
</div>
</body>
</html>
.row {
display: flex;
flex-wrap: wrap;
padding: 0 4px;
}
.column {
flex: 25%;
max-width: 33.3%;
padding: 0 4px;
}
.column img {
margin-top: 8px;
vertical-align: middle;
width: 100%;
filter: grayscale(1) brightness(0.5);
border-radius: 5px;
cursor: pointer;
transition: 0.3s linear;
}
.column img:hover {
filter: grayscale(0);
}
@media screen and (max-width: 800px) {
.column {
flex: 100%;
max-width: 100%;
}
.column img {
filter: grayscale(0) brightness(1);
}
}
Reference
この問題について(流体CSSギャラリー), 我々は、より多くの情報をここで見つけました https://dev.to/arc__coder/fluid-css-gallery-3bfjテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol