簡単コピペCSSのみ!画像を枠に合わせて中央にトリミングする方法
バラバラの大きさの画像を横並びにする時に不揃いな印象を与えてしまうのは嫌!
でも一枚一枚画像加工ソフトでトリミングなんてできない・・・
そんな時にこの簡単コピペCSSが役に立ちます。
基本のコード
1 2 3 |
<div class="photo01"> <img class="alignnone size-medium wp-image-25" src="http://tiwamaru-cherry.site/demo/images/photo.jpg" alt="チェリー" /> </div> |
1 2 3 4 5 6 7 |
.photo{ width: 250px; height: 250px; overflow: hidden; background-color: #ededed; border: 1px solid #ccc; } |
overflow: hidden; 以外のコードは自由に変更可能です。
クラス名などについても任意のものを使用してください。
今回使用する画像
画像をそのまま中央だけトリミングする方法
1 2 3 4 5 6 7 8 9 10 11 |
.photo img{ position: relative; top: 50%; left: 50%; width: auto; height: auto; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); } |

画像を横幅いっぱいに表示する方法
1 2 3 4 5 6 7 8 9 10 |
.photo img{ position: relative; top: 50%; left: 50%; width: 100%; height: auto; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); } |

画像を縦幅いっぱいに表示する方法
1 2 3 4 5 6 7 8 9 10 |
.photo img{ position: relative; top: 50%; left: 50%; width: auto; height: 100%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); } |
