Forums

Bootstrap and images

Permalink
struggling with getting images to be the full width of the column. I can't use img-responsive for obvious reasons. I managed to get it to override when in edit so it doesn't mess up the editing, but it's forcing the captcha image to full width. Anyone found a way round this?
 
PineCreativeLabs replied on at Permalink Reply
PineCreativeLabs
You could simply make the images "fluid-width" using CSS.

img.flex-image-class {
   width: 100%;
   height: auto !important;
}

The width could any percent, such as 85% or something.

Also, if you wanted to have different percent widths for different devices, you'd simply apply the above code to each media query and specify the percent width.
tonyswaby replied on at Permalink Reply
Not seen that rule.

Fixed it anyway. Since it messed up the backend I created a rule and the client can choose to apply it where they need images to fit the column.
PineCreativeLabs replied on at Permalink Reply
PineCreativeLabs
My solution isn't part of Bootstrap - it's more of a general solution that works with any responsive framework.

You could replace "flex-image-class" with whatever you wanted to call it. You'll just want to apply it to the image tag.
tonyswaby replied on at Permalink Reply
I see, that's actually what I did already. Switched it round obviously since it would be applied to a block via design.