Hello All
I want to use cards for my site but I do not want the image to be 100% I want just the size of the image. I can not find a way to change this. When I remove it it comes back in spades.
Can I get some ideas how to change it?
Thanks
Would you be able to provide an example of what you wish to achieve, and what the result is right now? Any pictures or code would be useful to help with this!
Hello All
This is what I am trying to do,
I have not found out how to do the one big card left and two rows small cards.
This is what happens every time I try to put and image into a card.
the code
always defaults to the d-block and w-100. the image I want to put in is 220pxx200px.
Thanks
img class=“card-img w-100 d-block card-img-top” src=“Zeiss_scope.png”
Your third image is not showing up in the forum (at least on my browser.)
The basic layout would be to use a container with a row and two columns. The first column would contain your card with the larger image. The second column would contain a row with multiple columns in it, and each column would contain a card (one for each smaller image.) Using the column width settings you can decide how many items you’ll have side-by-side at different screen widths. I don’t think you necessarily need to use Cards for this kind of layout, but you certainly can. I’d probably use divs with padding and margin utility classes to get the exact look I wanted.
The native size of the images should be no larger than the largest size they will display on the XXL screen size (or possibly the XS or SM depending on how many columns you decide to display) so you’re not using bigger images than are necessary, and shrinking them through the CSS.
IDK if this helps you…
2 Likes
@printninja beat me to explaining the layout, this is also what I would do. I wasn’t sure if that was part of your question however, so I apologise if we still are not answering your exact question as it is still a touch unclear.
I do however, have a more flexible solution to making sure your images are centered and not full width, I have prepared a video of me explaining how to set this up. You can view that here.
Hope this helps!
3 Likes