PHPプログラマーの松永です。
今回は、アイコンのレイアウトなどの時、縦長、横長の画像を設定した時に画像の縦横比が崩れる事がありますよね。
そのような崩れをCSSで「object-fit」というプロパティーを使っって解決してみようと思います。
一番簡単な「object-fit」というプロパティの使い方を紹介します。
目次
HTML
HTMLはとてもシンプルです。
今回画像はplacehold.jpを使用していますが、 実際の画像でも問題なく機能します。
<section class="contents">
<section class="contents_sample">
<p>「object-fit: cover;」なし</p>
<img class="object_none_fit" src="http://placehold.jp/f93e12/ffffff/630x315.png">
</section>
<section class="contents_sample">
<p>「object-fit: cover;」あり</p>
<img class="object_fit" src="http://placehold.jp/f93e12/ffffff/630x315.png">
</section>
</section>
CSS
今回は抵抗なく見えるようにしているCSSを記述しているのみとなっています。
.object {
&_none {
&_fit {
@extend .bdr50;
@extend .icon150;
}
}
&_fit {
@extend .bdr50;
@extend .icon150;
object-fit: cover;
}
}
.contents {
width: 100%;
&_sample {
width: 48%;
padding: 1%;
text-align: center;
display: inline-block;
background-color: #f3f3f3;
}
}
/**
* extend
*/
.bdr50 {
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
}
.icon150 {
width: 150px;
height: 150px;
}
jsfiddle
実際の動作をjsfiddleで確認できますので、是非動作させてみてください。
「object-fit: cover;」なしでは、画像の縦横比が崩れ、縮まってしまっています。
一方「object-fit: cover;」ありでは、画像の縦横比が保たれ、画像の中心を軸にトリミングされています。
以上でございます。
まとめ
今回はアイコンとして紹介しましたが、メディアなどの記事のメイン画像の記事一覧や記事詳細にも使用することができます。
Photoshopなどのツールを使用してサイズ指定で画像を作成するもの1つの方法ではありますが、 CSSを利用することで簡単にトリミングを行うことができますのでおすすめです。