Chrome將不會對圖像調整大小

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。