I've encountered an issue with my grid of resized images - the original images are larger than what can be accommodated by the Bootstrap grid setup.
The problem arises when I decrease the width of my window - instead of maintaining the resized size and adapting to the smaller width, each image is being stretched to fit the width of the div, appearing larger than its original size.
Any advice on how to fix this?
Here is the HTML code:
<div class="container">
<div class="row">
<div class="col-md-12 group">
<h4>Unsorted Pictures</h4>
<div class="row">
<div class="col-md-1"><img src="../img/image.jpg" class="image"></div>
<div class="col-md-1"><img src="../img/image.jpg" class="image"></div>
<div class="col-md-1"><img src="../img/image.jpg" class="image"></div>
<div class="col-md-1"><img src="../img/image.jpg" class="image"></div>
[additional image columns]
</div>
</div>
</div>
</div>
Here is the CSS code:
.rectangle {
border: 1px solid black;
}
.group {
border: 1px solid black;
height: 300px;
overflow: scroll;
text-align: center;
}
.unsorted {
height: 190px;
}
.image {
min-width: 100%;
max-width: 100%;
height: auto;
}
The container has a maximum width of 1024px.