Reputation: 81
What is the most effective way to deal with images of varying heights?
a) I have many images and several of them are taller than the rest. I'd like to make them restricted to the area of the carousel. But, if I define the carousel dimensions explicitly (like .carousel { width: 500px; height: 500px; } ) then I lose the auto-resizing that bootstrap does, which is crucial for making the site look good on mobile sites.
b) Is is possible to provide hyperlink/link for images in twitter bootstrap?
Anyone know how?
Upvotes: 3
Views: 2287
Reputation: 116
img { width: 100%; }
on the image and #carousel_container_id_here { max-height: XXXpx; overflow-y: hidden; }
Note that it will clip the images that exceed the max-height
.
Upvotes: 2
Reputation: 3726
I think you can just specify max-height
e.g. .carousel { max-height: 500px; }
. That way, re-sizing should work and the design won't break either.
Upvotes: 0