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;
}
}
私は私のインデントは申し訳ありませんが、現時点ではたわごとですので、知っています。
'px'や'% 'のように' unit'を追加してください。 – Rohit
それは問題でした、愚かな私。ありがとう、それは今働く。 – Deddy