以下サンプル

以下css

[css] .box{ position : relative; display : block; width : 40%; height : auto; background : #000; } .child_box{ position : relative; display : block; width : 100%; height : 100%; } .child_box:before{ content : ""; position : relative; display : block; padding-top : 100%; } .child_box img{ position : absolute; display : block; width : 100%; height : 100%; top : 0; object-fit: cover; object-position:center center; font-family:’object-fit:cover; object-position: center center;’; [/css]

以下html

[html] <script src="https://cdnjs.cloudflare.com/ajax/libs/object-fit-images/3.2.4/ofi.min.js"></script> <script> objectFitImages(‘img.obj’); </script> <div class="box"> <span class="child_box"> <img src="XXXXX.jpg" alt="" class="obj"> </span> </div> [/html]

object-fitを使うことにより縦横比を維持したままトリミングできます。

font-family:’object-fit:cover; object-position: center center;’;を使うことによりIEやEdgeに対応させます。
使用する場合はスクリプトの呼び出しと実行をしてください。

pading-topを75%に変えてやるとアスペクト比4:3や、56.25%に変えてやるとアスペクト比16:9などで固定してレスポンシブ化できる