Create small image gallery with same size image - html

Question

I am creating a gallery with a number of images but the images are viewed in different size and they don't look attractive. I tried to change the height to 100px but all the images are overlapped. I want different sized images to be viewed as same size and also maintain its responsiveness.How can I make them responsive and of same size?
/*
var importantStuff = window.open('', '_blank');
importantStuff.document.write('Loading preview...');
importantStuff.location.href = 'index.html';
*/
* {
box-sizing: border-box;
}
body {
background-color: #f1f1f1;
padding: 20px;
font-family: Arial;
}
.main {
max-width: 1000px;
margin: auto;
}
div.gallery {
border: 1px solid #ccc;
}
div.gallery:hover {
border: 1px solid #777;
}
div.gallery img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
background-color: white;
}
* {
box-sizing: border-box;
}
.responsive {
float: left;
width: 50%;
padding: 5px;
}
#media screen and (max-width: 600px) {
.responsive {
width: 100%;
}
}
#media only screen and (max-width: 500px) {
.responsive {
width: 100%;
}
}
<div class="main">
<h1>Image Compression</h1>
<hr>
<div class="responsive">
<div class="gallery">
<a target="_blank" href="1.png">
<img src="1.png" width="600" height="400">
</a>
<div class="desc">
<h3>Image:1</h3>
</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a target="_blank" href="2.png">
<img src="2.png" width="600" height="400">
</a>
<div class="desc">
<h3>Image:2</h3>
</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a target="_blank" href="3.png">
<img src="3.png" width="600" height="400">
</a>
<div class="desc">
<h3>Image:3</h3>
</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a target="_blank" href="4.png">
<img src="4.png" width="600" height="400">
</a>
<div class="desc">
<h3>Image:4</h3>
</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a target="_blank" href="5.png">
<img src="5.png" width="600" height="400">
</a>
<div class="desc">
<h3>Image:5</h3>
</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a target="_blank" href="6.png">
<img src="6.png" width="600" height="400">
</a>
<div class="desc">
<h3>Image:6</h3>
</div>
</div>
</div>
</div>

Answer 1

One suggestion would be to limit the img size with the a-tag around it. Check my changes for the a- and img-tag in my example:
* {
box-sizing: border-box;
}
body {
background-color: #f1f1f1;
padding: 20px;
font-family: Arial;
}
.main {
max-width: 1000px;
margin: auto;
}
div.gallery {
border: 1px solid #ccc;
}
div.gallery:hover {
border: 1px solid #777;
}
div.gallery a {
display: block;
width: 100%;
overflow: hidden;
height: 100px;
}
div.gallery img {
min-width: 100%;
}
div.desc {
padding: 15px;
text-align: center;
background-color: white;
}
* {
box-sizing: border-box;
}
.responsive {
float: left;
width: 50%;
padding: 5px;
}
#media screen and (max-width: 600px) {
.responsive {
width: 100%;
}
}
#media only screen and (max-width: 500px) {
.responsive {
width: 100%;
}
}
<div class="main">
<h1>Image Compression</h1>
<hr>
<div class="responsive">
<div class="gallery">
<a target="_blank" href="1.png">
<img src="https://placehold.it/200x150">
</a>
<div class="desc"><h3>Image:1</h3></div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a target="_blank" href="2.png">
<img src="https://placehold.it/200x100">
</a>
<div class="desc"><h3>Image:2</h3></div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a target="_blank" href="3.png">
<img src="https://placehold.it/150x200">
</a>
<div class="desc"><h3>Image:3</h3></div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a target="_blank" href="4.png">
<img src="https://placehold.it/200x300">
</a>
<div class="desc"><h3>Image:4</h3></div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a target="_blank" href="5.png">
<img src="https://placehold.it/150x150">
</a>
<div class="desc"><h3>Image:5</h3></div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a target="_blank" href="6.png">
<img src="https://placehold.it/200x200">
</a>
<div class="desc"><h3>Image:6</h3></div>
</div>
</div>
</div>
Problem with this solution is, that images are cut of, if the dimensions don't fit.