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

chrome适用于像px或%这样的单元尝试使用px。

Chrome不会对图片大小调整做出反应

1 个答案: