0
私は、ブートストラップとJQueryを使ってウェブサイト用の簡単なイメージギャラリーを構築しています。各画像は、3列幅のコンテナ（.square）に入っています。IE 11でのブートストラップとJQueryのレイアウト異常
私は、コンテナの高さを常にコンテナの幅と同じにするためにいくつかのJQueryを作成しました。これにより、各イメージの正方形が作成されます。
私はそれに応じて画像をスタイリングして、正方形に合わせました。これにより、私はポートレート画像とランドスケープ画像を混在させて扱うことができます。
これは、私が試したほぼすべてのブラウザとデバイスでうまくいきます。グリッドシステムがスローされたIE 11を除いて、これはうまくいきます。しかし、エッジでうまく動作します。
何を捨てているのか（どのように修正するのか）について考えていただければ幸いです。同様に、これに対処する別の方法の提案も役に立ちます。ポートレート画像と風景画像を混在させて一致させることは重要ですが、すべてを水平と垂直の中央に置いてください。
ここに問題のスクリーンショットがあります。ギャラリーページの
jsfiddleここ
ここで見つけることができる私のページのマークアップです：
CSS：
.square {}
.gall_item{ max-height: 100%;
max-width: 100%;
width: auto;
height: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
padding: 2em 2em 2em 2em; }
HTML
<div class="main container-fluid">
<div class="row">
<div class="col-lg-10 col-lg-offset-1" >
<div class="row">
<div class="col-lg-3 square">
<img class="gall_item" src="http://placehold.it/800x600">
</div>
<div class="col-lg-3 square">
<img class="gall_item" src="http://placehold.it/600x800">
</div>
<div class="col-lg-3 square">
<img class="gall_item" src="http://placehold.it/800x600">
</div>
<div class="col-lg-3 square">
<img class="gall_item" src="http://placehold.it/800x600">
</div>
<div class="col-lg-3 square">
<img class="gall_item" src="http://placehold.it/800x600">
</div>
<div class="col-lg-3 square">
<img class="gall_item" src="http://placehold.it/800x600">
</div>
<div class="col-lg-3 square">
<img class="gall_item" src="http://placehold.it/600x800">
</div>
<div class="col-lg-3 square">
<img class="gall_item" src="http://placehold.it/800x600">
</div>
</div>
</div>
</div>
</div>
jQueryの
$(document).ready(makeSq);
$(document).ready(makeSq);
$(window).resize(makeSq);
function makeSq(){
$(".square").each(function(){
$(this).height($(this).width());
});
}