디스플레이가있는 이미지 : 플렉스; 크롬에서 사진 및 비디오 뻗어와 파이어 폭스에서 그들은 완벽한 ..</p> <p>I된다</p> <pre><code>display: flex; </code></pre> <p>문제를 사용하여 내가 웹 사이트에 있어요 파이어 폭스

Question

크롬에 잘못 표시, 작업

.. 입니다 내 HTML과 CSS의 유효성을 확인 했으므로 아무런 문제가 없었습니다 ...

내가 시험해 볼 수있는 몇 가지 제안이 있으십니까?

나는 이미지와 동영상 자체에 플렉스 배치 시도하고 나는 폭을 시도

flex: 1 1 auto; 

및

flex: 0 1 auto; 

을 사용하고 있고, 높이

에게 손도 안

#section-campaign { 
    display: flex; 
    flex-direction: column; 
    justify-content: space-around; 
    z-index: -5; 
    width: 100%; 
} 
    .campaign-thumbnails { 
     display: -webkit-box; 
     display: -ms-flexbox; 
     display: flex; 
     -webkit-box-orient: horizontal; 
     -webkit-box-direction: normal; 
     -ms-flex-direction: row; 
     flex-direction: row; 
     width: 100%; 
     -ms-flex-pack: distribute; 
     justify-content: space-around; 
    } 
    .campaign-thumbnails img { 
     -webkit-box-flex: 1; 
     -ms-flex: 1 1 auto; 
     flex: 1 1 auto; 
    } 

<section id="section-campaign"> 
     <div class="campaign-title"> 
      <h3>Choose campaign</h3> 
     </div> 
     <div class="campaign-thumbnails"> 
      <img id="campaign-img-q" onmouseout="qFilterOn()" onmouseover="qNoFilter()" onclick="qFilter()" class="thumbnail-campaign grey-campaign-img" src="images/city.jpeg" 
       alt="campaign 1"> 
      <img id="campaign-img" onmouseout="filterOn()" onmouseover="noFilter()" onclick="xFilter()" class="thumbnail-campaign grey-campaign-img" src="images/resort.jpeg" 
       alt="campaign 2"> 
      <img id="campaign-img-z" onmouseout="zFilterOn()" onmouseover="zNoFilter()" onclick="zFilter()" class="thumbnail-campaign grey-campaign-img" src="images/culture.jpeg" 
       alt="campaign 3"> 
     </div> 
    </section> 

여기에 HTML 마크 업과이 섹션과 연결된 CSS가 표시됩니다.

Answer 1

이미지가 flex 컨테이너의 바로 아래에있는 자식 인 경우 이미지와 비디오를 확대하거나 축소하지 않으므로 flex: 0 0 auto;으로 설정합니다 (아직 완료되지 않은 경우 height에서 auto으로 설정)