コニファ・ロゴ
HOME サイトマップ 営業日カレンダー お問い合わせ

csstest：HTML5「background-size:cover;」を使って、画像を正方形にトリミング

長方形の画像を正方形にトリミングする際、元の画像を最大限に活かす場合は、短辺に合わせて長辺側を切り取ることになります。HTML5の「background-size:cover;」を使うことで、縦横のどちらが長い場合でも短辺に合わせて正方形にトリミングすることができます。

横長長方形のオリジナル画像

（１）左側から正方形にトリミング

（２）中央から正方形にトリミング

（３）右側から正方形にトリミング


（１）のCSSソース

.sample1 {
    width: 100%;
    background: url(images/d004-2.png) no-repeat left;
    background-size: cover;
}
.sample1:after {
    padding-top:100%;
    display: block;
    content: "";
}

縦長長方形のオリジナル画像

（４）上側から正方形にトリミング

（５）中央から正方形にトリミング

（６）下側から正方形にトリミング


 

 

 

戻るボタン