Forums

responsive images with Bootstrap

Permalink
We're having problems making images respond to their parent column they burst out and if we apply img:100% etc they don't scale.

We normally use Foundation so this is never a problem, but the client wants us to use Bootstrap. So the basic stuff which is taken care of by Foundation seems to be a problem in Bootstrap.

Anyone know how to fix this?

Ta:)
 
tonyswaby replied on at Permalink Reply
no worries, sorted, I just made all image responsive with standard CSS.
byvictoria replied on at Permalink Reply
byvictoria
Hi @tonyswaby,
Could you specify how you did it?
Thank you!
V.
MrKDilkington replied on at Permalink Reply
MrKDilkington
@byvictoria

In 5.7, the Image block has two default classes that can be used to add responsive image CSS - .ccm-image-block and .img-responsive. As an example, the Elemental theme uses .img-responsive to handle responsive images. 
.img-responsive {
    display: block;
    width: 100% \9;
    max-width: 100%;
    height: auto;
}

This CSS can be reused for other images on the site.
byvictoria replied on at Permalink Reply
byvictoria
Thank you @MrKDilkington!