CSS | 画像に写真のような枠、縁取りをつける方法
CSSで画像に一昔前の写真のような枠、縁取りをつける方法を紹介しています。
写真のような枠、縁取りをつける方法
写真のような枠、縁取りをつけた表示サンプルとHTML/CSSのサンプルコードです。
See the Pen CSS | Blur around the image by yochans (@yochans) on CodePen.
HTMLには、imgタグとコンテナになる親要素、クラス名「container」をdivタグで作成しています。
<div class="container">
<img src="https://1-notes.com/wp-content/uploads/2020/06/quality-50-1024x682.jpg">
</div>写真風の白い縁取りは、単純にborderで作成しているだけです。
画像要素にではなく親要素のコンテナに対して枠をつけています。
display: flexとoverflow関連は画像を拡大してもコンテナに縦横中央で収まるようにしているものです。
画像のサイズが固定であったりと用途によっては特に必要ない場合もあります。
.container {
width: 300px;
height: 200px;
display: flex;
align-items: center;
justify-content: center;
border: solid 10px #FFF;
overflow: hidden;
}
.container img {
width: 150%;
}