フレックスボックス - 同じ高さの画像

IMG 602x830ピクセル
IMG 613x830ピクセル
IMG画像のために作られた

属性599x830ピクセル：：同じ高さ830pxが異なる幅の3つの画像内に置く幅100％すべてがそうです画面サイズが630px以上になるまで正しく表示されます。スクリーンが630pxになった後、1枚の画像の高さ（2-img）が他の画像よりも少なくなった。

画面サイズに関係なく、すべての画像を同じ高さにする方法。

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
<meta charset="UTF-8"> 
 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
<meta http-equiv="X-UA-Compatible" content="ie=edge"> 
 
<link rel="stylesheet" href="style.css" type="text/css" /> 
 
<title>Document</title> 
 
    <style type="text/css"> 
 
    .category-block { 
 
     max-width: 768px; 
 
     margin:0 auto; 
 
     overflow:hidden; 
 
    } 
 
    .flex-block { 
 
     display:flex; 
 
     flex-direction: row; 
 
     align-items: stretch; 
 
    } 
 
    .flex-block img { 
 
     width: 100%; 
 
    } 
 
    </style> 
 
</head> 
 
<body> 
 
    <div class="category-block"> 
 
     <div class="flex-block"> 
 
      <div class="flex-block__area"> 
 
       <img src="1-img.jpg"></img> 
 
      </div> 
 
      <div class="flex-block__area"> 
 
       <img src="2-img.jpg"></img> 
 
      </div> 
 
      <div class="flex-block__area"> 
 
       <img src="3-img.jpg"></img> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</body> 
 
</html>

出典

2017-08-22 BulletEMF

スニペットます私の答えに欠けているものがありますか？あなたが受け入れるように調整するか？ ...それは単に動作しませんでしたか？ – LGSon

これは私がFirefoxの上で発見し、それが失敗する理由、私が発見していない問題です。

Firefox CSSハックを使用して、flex-block__areaをフレックスコンテナにすることで回避策があります。

CSSハックはFirefoxのみにターゲットにする必要がある、またはそうでなければめちゃくちゃに他のブラウザの代わりに

Fiddle demo

スタックは

.category-block { 
 
    max-width: 768px; 
 
    margin: 0 auto; 
 
    overflow: hidden; 
 
} 
 

 
.flex-block { 
 
    display: flex; 
 
} 
 

 
.flex-block img { 
 
    width: 100%; 
 
} 
 

 
/* Firefox bug fix */ 
 
@supports (-moz-appearance:meterbar) and (display:flex) { 
 
    .flex-block__area { 
 
    display: flex; 
 
    } 
 
}

<div class="category-block"> 
 
    <div class="flex-block"> 
 
    <div class="flex-block__area"> 
 
     <img src="http://placehold.it/602x830/f00"> 
 
    </div> 
 
    <div class="flex-block__area"> 
 
     <img src="http://placehold.it/613x830/0f0"> 
 
    </div> 
 
    <div class="flex-block__area"> 
 
     <img src="http://placehold.it/599x830/00f"> 
 
    </div> 
 
    </div> 
 
</div>

出典

2017-08-22 11:48:12 LGSon

フレックスボックス - 同じ高さの画像

答えて

関連する問題