CSSで画像を切り抜く方法

画像の比率サイズを変更する小技

例えば、比率サイズが1：1の画像があり、それを16：9の比率サイズに変更するとします。

Corcle Size
Base HTML & CSS
Add Cropping Styles
Second Method.にあるように、画像にはマイナスの余白があります。高さを追加
追加サイズ計算
Base HTML & CSS
切り抜きスタイル追加

Corcle Size

最初に画像からどの程度のサイズを切り出す必要があるかを算出します：

9/16= 56.0.0.0.1.2.0.0.0.0.0 0.1.0.0.0.0.0.0.0.1.0.0.25(%) /*トリミング後の画像のパーセントサイズ*/

100-56.25 =43.75(%) /*トリミングパーセント値*/

44 / 2 = 21.75(%) /*トリミングパーセント値*/

9/16 = 56.875(%) /*各辺*/

Base HTML & CSS

HTML

<figure>
<img src="image-name.jpg">
</figure>

CSS

figure{
width:300px; /*container-width*/
overflow:hidden; /*hide bounds of image */
margin:0; /*reset margin of figure tag*/
}
figure img{
display:block; /*remove inline-block spaces*/
width:100%; /*make image streatch*/
}

Add Cropping Styles

Now just add negative margin to the image

figure img{
/*add to other styles*/
margin:-21.875% 0;
}

LIVE DEMO

Second Method.にあるように、画像にはマイナスの余白があります。高さを追加

では、逆の手順で行ってみましょう。例えば、比率サイズが16:9の画像があり、それを比率サイズが1:1に変更したいとします。

追加サイズ計算

16/9 = 1.7777 /*比率1:1の場合のサイズ不足*/
1.777 * 100 = 177.77(%) /*トリミング前の画像のサイズ*/
177.77-100 = 77.77 /*トリミングされる追加サイズ*/
77.77/2 = 38.885(%) /*各サイズごとに切り取られる追加サイズ*/

Base HTML & CSS

HTML

<figure>
<img src="image-name2.jpg">
</figure>

CSS

figure{
width:300px; /*container-width*/
overflow: hidden; /*hide bounds of image */
margin:0; /*reset margin of figure tag*/
}
figure img{
display:block; /*remove inline-block spaces*/ 
}

切り抜きスタイル追加

figure img{
/*add to other styles*/
margin:0 -38.885%;
width:177.777%;
}

LIVE DEMO

以上です、どうぞ宜しくお願いします。

その他の書いたCSSの記事
CSS Position Sticky – How It Really Works！
新しいCSS論理プロパティ！
新しいレスポンシブデザイン進化論
SASSで複数のウェブサイトのためのCSSアーキテクチャ
CSS Grid Methods
Beoming a CSS Grid Ninja！
CSSグリッドメソッド
SASSで複数のウェブサイトを構築する
新しいCSS論理プロパティ！
新しいCSS論理プロパティ(New Logical Properties)
Recommended CSS Videos, Channels and Playlists

Follow me on:
My Twitter
My Company

You Can find me in my facebook groups:
CSS Masters
CSS Masters Israel

Alai