Currently, I am in the process of building my new website and one feature I would like to include is a modal that displays both text and images. The images are stored in a carousel format.
Most aspects of this setup are functioning properly, except for the image sizing issue. In my database, I have images with varying sizes and orientations. When clicking on an image, a modal opens up displaying information about the image along with the image itself. However, not all images fit perfectly within the modal and some end up distorted.
I'm unsure of the best approach to solve this problem. Should I modify the CSS of the modal or the carousel?
My initial thought is to resize the image if it doesn't fit neatly into the modal container.
<div class="modal fade" id="modal-<?php echo $id; ?>" tabindex="-1" role="dialog"
aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-xl" role="document">
<div class="modal-content">
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<h5 class="modal-title" id="modalLabel"><?php echo $title; ?></h5>
<div class="mt-5">
<p><?php echo $technique; ?></p>
<p><?php echo $size; ?></p>
<p><?php echo $date; ?> </p>
<p><?php echo $location; ?></p>
</div>
</div>
<div class="col-md-8">
<div class="carousel slide" id="imageCarousel-<?php echo $id ?>"
data-ride="carousel">
<ol class="carousel-indicators">
<li data-slide-to="1"
data-target="#imageCarousel-<?php echo $id ?>"
class="active"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100"
src="<?php echo $url ?>"
alt="image slide">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close
</button>
<button type="button" class="btn btn-primary">Inquire</button>
</div>
</div>
</div>
</div>
The screenshot below shows an example where the picture should be stretched more vertically: https://i.sstatic.net/GCUG0.jpg