Reputation: 1
I'm having trouble with image sizing in my gallery, I have been reading multiple threads and yt videos but can't seem to figure it out myself
image of the problem:
* {
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>
Upvotes: 0
Views: 493
Reputation: 418
There is no way where you can make them all stretch while using float
, without setting a fixed height to all images. You have three options.
object-fit: cover
to make it look like it's stretching, while in fact it's covering itflex-grow: 1
on the image (see this example, recommended!)Upvotes: 1
Reputation: 178421
Your images are not the same height/width, just like the ones I found you when I made you a snippet. So decide on which direction is important and use vh/vw and auto
* {
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>
Upvotes: 0
Reputation: 335
I am sure that the images have different resolution. First 2 images have the same resolution, 3:2 for example. Last 2 images have the same resolution, 2:1 for example, but differs than first 2 images. Please try to fix the resolutions of images all the same.
Upvotes: 0