行に沿って画像の高さを揃える

8

物事を振る舞うのに苦労しています。

レスポンシブサイトに画像の動的リストがあります。レイアウトは、画像を行/列または列行に配置できる場所に生成されます。

この例は近いですが、ブラウザのサイズが変更されると、ペアになっている画像が下部に配置されません...

<div style="width:100%;">
    <div style="width:60%; display: flex;  margin-left: auto;  margin-right: auto;">
        <div id="outterrow" style="width:100%;  float:left; display: flex; padding-bottom: 1.15%; ">
            <div id="column" style="float: left;overflow: hidden;background-color: inherit;width: 49.35%;">
                <div id="row" style=" padding-right: 2.330294%; "><img title="2.jpeg" src="https://i.postimg.cc/Xv5YsYv7/2.jpg" sizes="100vw" width="100%"> 
                </div>
            </div>
            <div id="column" style="float: left;overflow: hidden;background-color: inherit;width: 50.65%;">
                <div id="row" style=" "><img title="1.jpg" src="https://i.postimg.cc/B6cQG7Dr/1.jpg" sizes="100vw" width="100%"> </div>
            </div>
        </div>
    </div>

    <div style="width:60%; display: flex;  margin-left: auto;  margin-right: auto;">

        <div id="outterrow" style="width:100%;  float:left; display: flex; padding-bottom: 1.15%; ">
            <div id="column" style="float: left;overflow: hidden;background-color: inherit;width: 100%;">
                <div id="row" style=" "><img title="3.jpg" src="https://i.postimg.cc/ZnbYYPxC/3.jpg"  sizes="100vw" width="100%"> </div>
            </div>
        </div>
    </div>
    
    <div style="width:60%; display: flex;  margin-left: auto;  margin-right: auto;">

        <div id="outterrow" style="width:100%;  float:left; display: flex; padding-bottom: 1.15%; ">
            <div id="column" style="float: left;overflow: hidden;background-color: inherit;width: 43.55%;">
                <div id="row" style=" padding-right: 2.640643%; "><img title="5.jpg" src="https://i.postimg.cc/bwsJ2Tcn/5.jpg"  sizes="100vw"  width="100%"> </div>
            </div>
            <div id="column" style="float: left;overflow: hidden;background-color: inherit;width: 56.45%;">
                <div id="row" style=" "><img title="4.jpg" src="https://i.postimg.cc/XJ07m6ZK/4.jpg" sizes="100vw" width="100%"> </div>
            </div>
        </div>
    </div>
    
</div>

スニペットを展開

私はオブジェクトフィットで実験しましたが、Safariはバラバラになっているようです。

編集：ここでの参考のために、問題の例を示します。

— ダン
ソース

追加vertical-align: bottomあなたにimg（要素デモ | 説明）

— マイケル・ベンジャミン

デモリンクはまだ初期の問題を示しています...ウィンドウのサイズを変更すると、画像がたまにずれます

— Dan

はい。多分それは別の問題です。質問を再開しました。

— マイケルベンジャミン

また、あなたが説明している不整合の問題はわかりません。少なくともChromeではできません。

— マイケルベンジャミン

質問に追加されたスクリーンショット（Chrome v77、Mac）をご覧ください

— Dan

3

もちろん、HTML img-tagの代わりに背景画像を使用することもできます。画像の高さにアクセスできる場合は、JavaScriptまたはPHP（または任意の設定）を使用して画像の高さを動的に入力することをお勧めします。その目的で使用できるように、ラッピングコンテナーの内側にスペーサーdivを配置しました。

#wrap_all {
  width:100%;
}

#inner {
  max-width:1210px;
  padding:0 50px;
  margin:0 auto;
}

.flexrow {
  display:flex;
  justify-content: space-between;
  background:#f5f5f5;
  flex-wrap:wrap;
}


.flexcol {
  flex:0 0 49%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position:top center;
  margin-bottom: 2%;
}

.spacer.height-80vh {
  height:80vh;
}

.flexcol.fullwidth {
  flex:0 0 100%;
}

<div id="wrap_all">
    
  <div id="inner">
    
    <div class="flexrow">
      
      <div class="flexcol" style="background-image: url('https://i.postimg.cc/Xv5YsYv7/2.jpg')">
        <div class="spacer height-80vh"></div>
      </div>
      
      <div class="flexcol" style="background-image: url('https://i.postimg.cc/B6cQG7Dr/1.jpg')">
        <div class="spacer height-80vh"></div>
      </div>
      
      <div class="flexcol fullwidth" style="background-image: url('https://i.postimg.cc/ZnbYYPxC/3.jpg')">
        <div class="spacer height-80vh"></div>
      </div>
      
      <div class="flexcol" style="background-image: url('https://i.postimg.cc/bwsJ2Tcn/5.jpg')">
        <div class="spacer height-80vh"></div>
      </div>
      
      <div class="flexcol" style="background-image: url('https://i.postimg.cc/XJ07m6ZK/4.jpg')">
        <div class="spacer height-80vh"></div>
      </div>
      
    </div>
    
  </div>  
  
</div>

スニペットを展開

— wbq
ソース

2

これはピクセル丸め、またはサブピクセル問題と呼ばれ、基本的な数学の問題です。

レスポンシブな親の内部に座っている、相対幅が50％以下の2つのコンテナがあります。その親要素の幅が奇数の場合はどうなりますか？211ピクセルと言います。211pxの50％は105.5pxです。しかし、.5pxとしてはそのようなAの事はありません -あなたの画面だけで、物理的にピクセルを定義することをその小さな電球の半分だけをオンにすることはできません。ブラウザは、それをより大きいまたはより小さい数値に丸めます。

よく見ると、レイアウトは次の要素で構成されています。

幅の10進数の％値を持つ列（49.35％）
間隔の小数％（パディング：2.330294％）
幅と高さがランダムな画像
列の高さが定義されていません。
すべてがレスポンシブdivでラップされているため、絶対的な幅や高さはありません。

％指向のレイアウト内のさまざまな次元のdivの内側にさまざまな次元の画像を挿入するソリューションはありません。これは、ピクセルの丸めが多すぎることを説明するだけです。よく見ると、このレイアウトは100％「壊れている」...空白のピクセルが残っているか、内部の画像が縮小/歪んでいます。

誰かがハッキングすると、その小さな空白のピクセルが生成されるか、画像が歪む（同じように高さまたは幅が異なる）か、ピクセルが画像のどこかに密かに隠されます。

今、あなたが提示した特定のスニペットの簡単なハック：

絶対pxを使用して左にパディング
：afterを使用して空白のスペーサーをpadding-bottomに追加します

img {
  vertical-align: bottom;
}

.column {
  position: relative;
}

.column:after {
  content: '';
  display: block;
  position: absolute;
  bottom: 0;
  width: 100%;
  background: #fff;
  height: 6px; /* this will fake padding bottom */
}

.row {
  padding-left: 6px;
}

<div style="width:100%;">
  <div style="width:60%; display: flex;  margin-left: auto;  margin-right: auto;">
    <div id="outterrow" style="width:100%;  float:left; display: flex;">
      <div class="column" style="float: left;overflow: hidden;background-color: inherit;width: 49.35%;">
        <div class="row" ><img title="2.jpeg" src="https://i.postimg.cc/Xv5YsYv7/2.jpg" sizes="100vw" width="100%">
        </div>
      </div>
      <div class="column" style="float: left;overflow: hidden;background-color: inherit;width: 50.65%;">
        <div class="row" style=" "><img title="1.jpg" src="https://i.postimg.cc/B6cQG7Dr/1.jpg" sizes="100vw" width="100%"> </div>
      </div>
    </div>
  </div>

  <div style="width:60%; display: flex;  margin-left: auto;  margin-right: auto;">

    <div id="outterrow" style="width:100%;  float:left; display: flex;">
      <div class="column" style="float: left;overflow: hidden;background-color: inherit;width: 100%;">
        <div class="row" style=" "><img title="3.jpg" src="https://i.postimg.cc/ZnbYYPxC/3.jpg" sizes="100vw" width="100%"> </div>
      </div>
    </div>
  </div>

  <div style="width:60%; display: flex;  margin-left: auto;  margin-right: auto;">

    <div id="outterrow" style="width:100%;  float:left; display: flex; ">
      <div class="column" style="float: left;overflow: hidden;background-color: inherit;width: 43.55%;">
        <div class="row"><img title="5.jpg" src="https://i.postimg.cc/bwsJ2Tcn/5.jpg" sizes="100vw" width="100%"> </div>
      </div>
      <div class="column" style="float: left;overflow: hidden;background-color: inherit;width: 56.45%;">
        <div class="row" style=" "><img title="4.jpg" src="https://i.postimg.cc/XJ07m6ZK/4.jpg" sizes="100vw" width="100%"> </div>
      </div>
    </div>
  </div>

</div>

スニペットを展開

繰り返しになりますが、これらの状況下では「解決策」は存在せず、欠点のあるハックのみです。

*ブラウザに公平を期すために、彼らはピクセルの丸めの処理を非常にうまく行っているため、ほとんどの開発者はこれが問題であることさえ認識していません。

— エベッサ
ソース

0

CSSが失敗したとき、私はバニラズに行きます：

コードスニペットを表示

document.addEventListener('DOMContentLoaded', function() {
  [...document.querySelectorAll('.flex-fill')].forEach(div => {
    [...div.querySelectorAll('img')].forEach(img => {
      img.addEventListener('load', () => {
        const box = document.createElement('div');
        const basis = img.height ? img.width * 100 / img.height : 0;
        box.style.background = `url('${img.src}') center /cover no-repeat`;
        box.style.flexBasis = `${basis}%`;
        box.setAttribute('data-basis', basis);
        div.insertBefore(box, img);
        box.appendChild(img);
      })
    })
  });
  const resizeFlexFills = _.throttle(() => {
    [...document.querySelectorAll('.flex-fill')].forEach(div => {
      const gutter = (div.currentStyle || window.getComputedStyle(div))
        .marginBottom.match(/\d+/)[0] || 0;
      const children = [...div.querySelectorAll('div')];
      const basisSum = children.map(e => e.dataset.basis)
        .reduce((a, b) => Number(a) + Number(b));
      div.style.height = `${(div.offsetWidth - ((children.length - 1) * gutter)) * 100 / basisSum}px`;
      [...div.querySelectorAll('div:not(:last-child)')].forEach(div => {
        div.style.marginRight = `${gutter}px`
      })
    })
  }, 100, {
    leading: true,
    trailing: true
  });
  window.addEventListener('load', resizeFlexFills);
  window.addEventListener('resize', resizeFlexFills);
});

.flex-fill {
  width: 100%;
  display: flex;
  height: 0;
  transition: height .3s cubic-bezier(.4, 0, .2, 1);
  /* gutter size (remove if you don't want any space between them) */
  margin-bottom: 8px;
}

.flex-fill img {
  display: none;
}

@media(max-width: 600px) {
  .flex-fill {
    height: auto !important;
    display: block;
  }
  .flex-fill img {
    display: block;
    width: 100%;
   /* needs to be same as gutter size, above */
    margin-bottom: 8px;
  }
  .flex-fill div {
    margin-right: 0 !important;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.min.js"></script>

<div class="flex-fill">
  <img title="1.jpg" src="https://i.postimg.cc/B6cQG7Dr/1.jpg">
  <img title="5.jpg" src="https://i.postimg.cc/bwsJ2Tcn/5.jpg">
  <img title="4.jpg" src="https://i.postimg.cc/XJ07m6ZK/4.jpg">
  <img title="2.jpeg" src="https://i.postimg.cc/Xv5YsYv7/2.jpg">
  <img title="3.jpg" src="https://i.postimg.cc/ZnbYYPxC/3.jpg">
</div>
<div class="flex-fill">
  <img title="2.jpeg" src="https://i.postimg.cc/Xv5YsYv7/2.jpg">
  <img title="1.jpg" src="https://i.postimg.cc/B6cQG7Dr/1.jpg">
</div>
<div class="flex-fill">
  <img title="3.jpg" src="https://i.postimg.cc/ZnbYYPxC/3.jpg">
</div>
<div class="flex-fill">
  <img title="5.jpg" src="https://i.postimg.cc/bwsJ2Tcn/5.jpg">
  <img title="4.jpg" src="https://i.postimg.cc/XJ07m6ZK/4.jpg">
</div>

スニペットを展開

ノート：

特別なのは、ガターの有無にかかわらず、画像の比率が維持されることです。ご覧のように、それは完全なピクセルです
それが起こることのために、しかし、resizeFlexFills()上に結合される必要があるloadとresize高さを更新します
したがって、私はlodashを使用してすべてのthrottle実行のみを許可しました100ms。
樋はCSSを介して設定され、でのみ機能しpxます。賢くすることもできますが、CSSユニットをピクセルに解析することは、この質問の範囲（IMHO）からはかなり外れています。
これtransitionは完全に捨てることができます
「応答性」はありませんが、簡単に実行できます。それが起こることのために私は去るだろう<img>変更しながら、所望のデバイスの幅の下ブロックとしてそれらを表示、中のSをflex-directionしますcolumn。
実際に、私はそれを反応させました。必要ない場合は、@mediaクエリコードを削除してください。

— タオ
ソース

-1

画像をdivに合わせるにはheight: 100%、imgスタイルを追加する必要がありますの親divのdivの高さも指定する必要があります。

以下のコードを参照してください：

<div style="width:100%;height: 100%;">
  <div style="width: 100%;padding-bottom: 1.15%; ">
    <div style="width:60%; margin-left: auto;  margin-right: auto;display: flex;height: 250px;">
      <div class="row" style=" padding-right: 2.330294%;width: 50%;">
        <img title="2.jpeg" src="https://i.postimg.cc/Xv5YsYv7/2.jpg"  width="100%" height="100%"> 
      </div>
      <div class="row" style=" width: 50%;">
        <img title="1.jpg" src="https://i.postimg.cc/B6cQG7Dr/1.jpg"  width="100%"  height="100%">
      </div>
    </div>
  </div>
    
  <div style="width: 100%; padding-bottom: 1.15%; ">
    <div style="width:60%;margin-left: auto;  margin-right: auto;display: flex;">
      <div class="row" style=" ">
        <img title="3.jpg" src="https://i.postimg.cc/ZnbYYPxC/3.jpg"   width="100%">
      </div>
    </div>
  </div>
        
  <div style="width: 100%;">
    <div style="width:60%;margin-left: auto;  margin-right: auto;display: flex;height: 200px;">
      <div class="row" style=" padding-right: 2.640643%; width: 50%;">
        <img title="5.jpg" src="https://i.postimg.cc/bwsJ2Tcn/5.jpg" height="100%" width="100%"> 
      </div>
      <div class="row" style=" width: 50%;">
        <img title="4.jpg" src="https://i.postimg.cc/XJ07m6ZK/4.jpg" height="100%" width="100%"> 
      </div>
    </div>
  </div>        
</div>

スニペットを展開

— dom.macs
ソース