投稿者 天宮 司 Bloggerカスタマイズ

Bloggerカスタマイズ講座12：画像の歪みを修正しよう

天宮です。


ブログのトップページを見ていたら

あれ、なんか違和感が

サムネイルが画像が歪んでるような…


ということで画像の歪みを修正

画像の縦横比を保ってトリミングする

.article-list img　を検索

下記を追加します。

object-fit: cover;

.article-list img{
    float: left;
    width: 300px;
    height: 185px;
    padding-right: 20px;
    object-fit: cover;
}
/*  記事一覧のタイトル  */

#related-posts .related_img　を検索

同じく下記を追加

object-fit: cover;

#related-posts .related_img{
    margin: 5px;
    width: 150px;
    height: 100px;
    transition: all 300ms ease-in-out; 
    object-fit: cover;
}
#related-title{
    font-size: 12px;
    width: 140px;
    height: 70px;
    font-weight: 700;
    margin-right: 5px;
    margin-left: 5px;
    box-sizing: border-box;
}

表示を確認してみましょう。

微妙な違いだけど分かるかな～

並べて比較してみると、

こんな感じです。

意外と違いますよね、

修正できるとこは修正しておきましょう。