Struggling with a project and attempting to create a fixed div container for uniform picture sizes, I've tested various methods recommended by others but have had zero success in altering the size of my div container. Could it be due to my use of bootstrap? Why is resizing not working?
[image1][image2]
[ image3 ]
My attempt at achieving a fixed-size div still results in:
[image1][image2]
[image3]
.imagesContainer {
max-width: 200px;
max-height: 100px;
overflow: hidden;
}
.imagesContainer img {
width: 100%;
min-height: 100%;
}<div class="album">
<div class="imagesContainer">
<div class="row justify-content-center mt-3">
<div class="col-4 px-2">
<img src="https://via.placeholder.com/150" class="img-fluid" alt="1">
</div>
<div class="col-4 px-2">
<img src="https://via.placeholder.com/150" class="img-fluid" alt="1">
</div>
</div>
</div>
<div class="imagesContainer">
<div class="row">
<div class="col mt-3"></div>
<div class="col mt-3"><img src="https://via.placeholder.com/300" alt="3"></div>
<div class="col mt-3"></div>
</div>
</div>
</div>