Hello, I'm facing an issue with bootstrap image sizing. When I insert images with smaller dimensions into a card, they are being blown up to fit the card which results in them becoming blurry. Here is the HTML code that's causing the problem: {% for item in book_list %} The Arsonist Lorem Ipsum...
More Info ~~~When this is rendered, it produces:
https://i.sstatic.net/Vgbe1.jpg
The card-img-top elements end up much larger than the original image. This is not what I want for two reasons:
I prefer the cards to be smaller with white space on each side.
The resizing of the images leads to blurriness, especially when they have low resolutions to begin with.
Is there a way to make the card images smaller without altering the size of other images within similar resolution limits?
Similar to this example (image at top shows current output with black box representing full screen). It can be less than 5 cards in a row and margins don't need to be as large, just a rough idea of what I'm aiming for.
https://i.sstatic.net/tjczN.png
The goal is to display images regardless of their original dimensions like this - ensuring a 2000x3000 image doesn't occupy more space than a 200x300 one.
Attempts so far:
I've experimented with custom CSS, adjusting the height property
.card-img-top {
width: 100%;
height: 15vw;
object-fit: cover;
}
and also tried using inline styles like style="width: 100%" assuming it would inherit width from the original image but still no success. I need help resolving this issue.
In summary:
How do I prevent my card images from expanding, irrespective of their original dimensions?
I'm new to this topic and platform, any guidance would be appreciated!
Thank you.