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;
}



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


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



並べて比較してみると、


こんな感じです。

意外と違いますよね、
修正できるとこは修正しておきましょう。