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。