ホームページ制作で扱うコード・プログラムを掲載MENUHOMEHTML&CSSJavaScriptWordPressToolOtherGalleryMENUHOMEHTML&CSSJavaScriptWordPressToolOtherGalleryHTML&CSSHOMEHTML&CSSCSSで画像を正方形にトリミングして縦横比を維持したまま可変してくれる方法CSSで画像を正方形にトリミングして縦横比を維持したまま可変してくれる方法HTML&CSS2018/07/09B!Photoshopでトリミングした画像をそのまま表示できればいいのですが、Webサイトだと画像サイズが均等じゃないものを表示する場面が出てきます。WordPressのようなCMSで、画像を出力する際など投稿者によってサイズがバラバラだったりします。そこで今回はCSSで画像をトリミングし、縦横比を維持したまま可変してくれる方法を紹介していきます。CodePen.まずはデモをご覧ください。PCで見られている方はウィンドウサイズを縮めたりしてみてください。画像の縦横比は維持されていると思います。基本的にはHTMLとCSSだけで実装することが出来ます。alt=""></li></ul>上記HTMLを記述します。ここで画像を読み込んでいます。cover;}上記CSSを記述します。以上で実装は完了ですがCSSについて詳しく解説していきます。25%;}flexboxで画像を横並びにして、1列に4つ並ぶようにliタグに25%と指定しています。この値によってアスペクト比をコントロールすることが出来ます。アスペクト比の計算式は以下になります。」に当てはまれば表示することが出来ます。」とすれば画像を4:3で表示することが出来ます。」を指定し、中央基準でトリミングされるように指定しています。」は縦横比を維持したままトリミング出来るプロパティになります。以上で実装は完了になります。」はIEには未対応なので、このまま使うことが出来ません。IEでも表示崩れがないように調整していきます。」をダウンロードします。」だけなのでこちらをHTMLファイルで読み込みます。alt="">対象となるimgタグにクラス名を付与します。objectFitImages('.ofi');});最後にスクリプトを呼び出します。括弧内にはimgタグに付けたクラス名を記述してください。以上を踏まえるとIEでも綺麗に表示することが出来ます。