画像トリミング(css)
/* トリミングする外側の枠 */
.trim {
overflow: hidden;
width: 200px;/* トリミングしたい枠の幅 */
height: 200px;/* トリミングしたい枠の高さ */
position: relative;
}
/* 横幅に合わせてリサイズ、はみ出た分をトリミング */
.trim img {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 100%;
height: auto;
}
https://www.tam-tam.co.jp/tipsnote/html_css/post10099.html
全幅でトリミング
/* 画像の縦と横、大きいほうに合わせてリサイズ */
.trim img {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
}