I have a layout with three columns using col-md-4 for a thumbnail design, and then I have another page with col-md-8. In both cases, I need to display an image. Should I use the same image for both layouts or would it be best to have two separate images, each sized appropriately?
<div class="col-md-4 col-sm-4">
<div class="product">
<a href="">
<img src="/media/{{ p.img }}" style="max-width: 100%; max-height: 100%;" />
</a>
<div class="text">
<h3>Some text</h3>
</div>
</div>
#product img{
max-width: 100%;
max-height: 100%;
}
How can I adjust the size of the image to fit both the 3-column grid and the 8-column grid while keeping it responsive?
Would it be more beneficial to have two distinct images (one large and one small) rather than using the same image for both layouts?