html - Chrome 不会对图像调整大小使用react

Question

我有个小问题。我创建了一个简单的网页并使用 Firefox 进行了测试——一切正常。然后我意识到我也应该用其他浏览器测试它，当我在 Chrome 中打开它时，每张图片都是原始大小。当我尝试使用 CSS(高度、宽度)进行修改时，它不会使用react。

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

chrome 可以使用 px 或 % 之类的单位试试 px。