我在画廊中无法调整图像大小,我一直在阅读多个主题和视频,但自己似乎无法弄清楚
问题图片:
* {
box-sizing: border-box;
}
.gallery {
border: 1px solid #ccc;
}
.gallery img {
width: 100%;
height: auto;
}
.des {
padding: 15px;
text-align: center;
}
.responsive {
padding: 0 6px;
float: left;
width: 25%;
}
<h1>Veckans deals!</h1>
<div class="responsive">
<div class="gallery">
<a href="vdeals_ett.jpg" target="_blank"><img src="https://topracingdrone.com/wp-content/uploads/2018/12/DJI-Phantom-4-Photogrammetry-Drone-300x184.png" alt="Drönare" width="300" height="200"></a>
<div class="des">Add a desciption of the picture</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a href="vbild_two.jpg" target="_blank"><img src="https://topracingdrone.com/wp-content/uploads/2018/12/Holy-Stone-HS100-UAV-photography-drone-300x176.png" alt="Drönare" width="300" height="200"></a>
<div class="des">Add a desciption of the picture</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a href="vbild_tre.jpg" target="_blank"><img src="https://topracingdrone.com/wp-content/uploads/2018/12/Parrot-Bebop-2-drone-300x143.jpeg" alt="Drönare" width="300" height="200"></a>
<div class="des">Add a desciption of the picture</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a href="vbild_fyra.jpg" target="_blank"><img src="https://topracingdrone.com/wp-content/uploads/2018/12/GoPro-Hero-4-Silver-300x300.jpg" alt="Landskap" width="300" height="200"></a>
<div class="des">Add a desciption of the picture</div>
</div>
</div>
我确信图像具有不同的分辨率。前两个图像具有相同的分辨率,例如3:2。后两个图像具有相同的分辨率,例如2:1,但与前两个图像不同。请尝试固定所有图像的分辨率。
您的图像的高度/宽度不同,就像我将片段片段化后发现的一样。因此,确定哪个方向很重要,然后使用vh / vw和auto
[如果没有为所有图像设置固定的高度,就无法在使用float
的同时使它们全部拉伸。您有三个选择。