图片库HTML CSS

Question

我在我的画廊中遇到了图像大小的问题，我已经阅读了多个线程和yt视频，但似乎不能自己弄清楚

问题的图像：

​

​

* {
  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>

​

Answer 1

如果不为所有图像设置固定的高度，您就无法在使用float的同时使它们全部拉伸。您有三个选择。

1. 在图像上设置一个固定的高度，并使用object-fit: cover让它看起来像是在拉伸，而实际上它是覆盖它的，并在图像上使用
2. flex-grow: 1 (see this example，flexbox使所有图像具有相同的宽度和高度，如果它们可以被统一。

Answer 2

我确信这些图像具有不同的分辨率。前两张图像具有相同的分辨率，例如3:2。后两张图像具有相同的分辨率，例如2:1，但与前两张图像不同。请尝试修复所有图像的分辨率。

Answer 3

您的图像的高度/宽度不同，就像我为您制作代码片段时发现的图像一样。因此确定哪个方向是重要的，并使用vh/vw和auto

More here

​

* {
  box-sizing: border-box;
}

.gallery {
  border: 1px solid #ccc;
}

.gallery img {
  width: auto;
  height: 15vh;
}

.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>

​