はいどうもバジラでございます！本日もコピペ可の記事です！
今回の記事ですが、端的にまとめますと、
元画像の編集が死ぬほどめんどくさいので、画像のトリミングをcssだけでやるわ
っていうことです。wordpress等の更新コンテンツでサムネイルの高さがバラバラになるのを何とかしたい！っていうときによく使いますね！
まぁjsやabsoluteで色々調節もできるんですが、今回はflexboxを使用した「なるべく難しいことはしたくない！」って人向けの記事かと思います！
サンプルはこちら！
元画像
トリミング版
まー技術的には見慣れたものですかね！
敢えてポイントを挙げるとするならば、高さを必ず固定値を設定してください！ってことくらいでしょうか！あと、画像が大きければ大きいほど程、トリミング範囲が小さくなりますね！
んじゃコード
html
<div class="hoge"><img src="画像URL"></div>css
.hoge{
width: 100%;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
max-width:700px;
height: 200px;
img{
width: 100%;
max-width:none;
height: auto;
}解説としてはですね、img要素を何か適当な要素で包んで、お好みのwidth、heightを設定したのち、overflow:hiddenをかけて、flexboxを当てる形ですね！
今は当たり前のflexboxですが、flexboxプロパティが出たての時は重宝したんですよマジで！
応用編！！
サンプル
コードはこう！
html
<div class="hoge"><img src="画像までのパス"></div>css
.hoge{
width: 100%;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
max-width:500px;
height: 500px;
border-radius:500px;
img{
width: auto;
height: 100%;
}
}ハイ！応用編としましては何かと利用することの多い丸形にくりぬいてみました！横長の画像を丸く切り取る場合は、imgに高さ100%を。縦長の画像を丸く切り取る場合は横幅を100%にするとうまくいきます！ぜひ使ってみてくださいね！
丸く切り抜く場合は、画像の比率に注意！
横長画像はimgにheight:100%を、縦長画像にはimgにwidth:100%を使いましょう！
最後に
本来は「面倒くさがらずサムネに設定する画像の比率は合わせましょう。」ってだけなんですが、クライアントワークとなるとそうもいきません。
基本的にお知らせやブログのサムネイルに使用することの多い技術なわけですが、大抵は任意の画像をアップロードできる状況にしておくのがベター。
投稿者は「この画像をサムネイルにしたい！」って事くらいしか考えないですし、ぐちゃぐちゃ面倒くさくなるくらいなら、ある程度こっちで対応してしまおうと考え方ですね！
webデザイナーというものはいかに早く情報を取得し、ソースを実装するか。そしてそれが動かなくなった時に、いかに早く適切な対処するかが重要です。
「頭硬くしすぎんなよ！過程も大事だけど、遥かに結果の方が大事」って事っすわ！
はい、それでは今日はこのあたりにしておこうと思います！さようならー(^q^)ﾉｼ
