2016-07-14 17 views
0

少し問題があります。私は簡単なWebページを作成し、Firefoxでテストしました。すべてうまくいきました。その後、私は他のブラウザでもテストしなければならないことに気付き、Chromeで開いたときにはすべての画像が元のサイズになりました。 CSS(高さ、幅)で修正しようとすると反応しません。Chromeは画像のサイズに反応しません

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; 

} 
} 

私は私のインデントは申し訳ありませんが、現時点ではたわごとですので、知っています。

+1

'px'や'% 'のように' unit'を追加してください。 – Rohit

+0

それは問題でした、愚かな私。ありがとう、それは今働く。 – Deddy

答えて

1

クロムはpxまたは%などのユニットで動作します。

関連する問題