はじめに
ある日、レスポンシブで正方形を作り、さらにその中央にSVGのアイコンがあるスタイルの実装をしたときに難しく感じたので記事にしました。
ソースコード
HTML
index.html
<body>
<div class="container">
<div class="box">
<img src="./icon.svg" class="icon">
</div>
<div class="box">
<img src="./icon.svg" class="icon">
</div>
<div class="box">
<img src="./icon.svg" class="icon">
</div>
<div class="box">
<img src="./icon.svg" class="icon">
</div>
<div class="box">
<img src="./icon.svg" class="icon">
</div>
<div class="box">
<img src="./icon.svg" class="icon">
</div>
<div class="box">
<img src="./icon.svg" class="icon">
</div>
<div class="box">
<img src="./icon.svg" class="icon">
</div>
<div class="box">
<img src="./icon.svg" class="icon">
</div>
</div>
</body>
CSS
styles.css
.container {
display: flex;
flex-wrap: wrap;
}
.box {
padding-bottom: calc(100% / 3);
width: calc(100% / 3);
height: 0;
position: relative;
}
.icon {
position: absolute;
width: 50%;
height: 50%;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
画面
分かりやすいように背景色をつけました
最後に
レスポンシブで正方形を保ちつつ、中のSVGアイコンの大きさも保つのが難しかったです
みなさんも良い正方形ライフを！
おわり
↧