크롬이 이미지의 크기에 반응하지 않음

Question

조금 문제가 있습니다. 하나의 간단한 웹 페이지를 만들고 Firefox로 테스트했습니다. 모든 것이 잘되었습니다. 그런 다음 다른 브라우저에서도 테스트해야한다는 것을 깨달았습니다. Chrome에서 열면 모든 그림이 원본 크기였습니다. CSS (높이, 너비)로 수정하려고하면 반응하지 않습니다.

HTML :

<div class="picture"> 
    <div id="first"> 
    <ul class="gallery"> 
     <li> 
     <a href="images/morning.png"> 
      <img src="images/morning.png" alt=""> 
      <p>Early morning in China</p> 
     </a> 
     </li> 
     <li> 
     <a href="images/night.png"> 
      <img src="images/night.png" alt=""> 
      <p>Night sky in Singapore</p> 
     </a> 
     </li> 
     <li> 
     <a href="images/nature.png"> 
      <img src="images/nature.png" alt=""> 
      <p>Nature road</p> 
     </a> 
     </li> 
     </ul> 
     </div> 
     <div id="second"> 
     <ul class="gallery"> 
     <li> 
      <a href="images/app.png"> 
      <img src="images/app.png" alt=""> 
      <p>Weather app for iOS</p> 
      </a> 
     </li> 
     <li> 
      <a href="images/cold.png"> 
       <img src="images/cold.png" alt=""> 
       <p>Cold winter evening</p> 
      </a> 
     </li> 
     <li> 
     <a href="images/bugs.png"> 
      <img src="images/bugs.png" alt=""> 
       <p>Little bugs on the field</p> 
     </a> 
     </li> 
    </ul> 
    </div> 
    </div> 

CSS :

/********* WORKS **********/ 

.gallery { 
    list-style: none; 
    margin-right: 35; 
    margin-top: 30; 
} 

.gallery img { 
    width: 250; 
    height: 250; 
} 

@media screen and (min-width: 720px) { 
    .flex { 
     display: -ms-flexbox;  /* TWEENER - IE 10 */ 
     display: flex; 
     max-width: 1200px; 
     -ms-flex-pack: distribute; 
     justify-content: space-around; 
     margin: 0 auto; 
} 

.gallery { 
    margin-top: 40; 
    margin-bottom: 50; 
} 

#first { 
    width: 50%; 
    float: left; 
} 

#second { 
    width: 50%; 
    float: right; 
} 

.gallery img { 
    width: 320; 
    height: 320; 

} 
} 

내가 내 들여 쓰기 순간에 똥을 알고, 그래서, 미안 해요.

Answer 1

크롬은 px 또는 %과 같은 단위로 작동합니다. px로 시도해보십시오.