CODEWITHSUNDEEP
htmlcssimagetwitter-bootstraplayout
kramer65
kramer65

Reputation: 54013

How to make image responsive with Bootstrap?

I'm building a website which will list some buildings for sale with a picture and a small description. Since I want the website to be responsive I'm trying to use the Bootstrap3 grid system.

So the current html I have is as follows (running code here on bootply):

<div class="container">
    <div class="row">
        <div class="col-sm-8">
            <article class="row property-ad">
                <div class="col-sm-4">
                    <img class="property-thumbnail" src="https://uwaterloo.ca/pharmacy/sites/ca.pharmacy/files/uploads/images/pharmacy-building-street-view.jpg">
                </div>
                <div class="col-sm-8">
                    <div class="property-ad-title">Nice building</div>
                    <div class="property-ad-description">and some describing text here</div> 
                </div>
            </article>
        </div>
        <div class="col-sm-4">
            <div class="right-side-ad">
                some advertisement is going here
            </div>
        </div>
    </div>
</div>

The problem is that the title and description are only displayed correctly on a large (lg) screen. On an md or sm screen however, the title and description are partly displayed on top of the image because the image appears larger than its container. I tried giving the image a max-width: inherit;, but that doesn't seem to do anything.

Next to the fact that I don't know how to give it a proper max-width, the main problem seems to be that I don't really know what behaviour I would want. Because if the image resizes its width, it would either get distorted, or it would also need to change its heigth. If the height changes however, the text next to it could get a larger height than the image, which would also make the layout look messy.

So my main questions;

  1. What is the typical desired behaviour to make a website responsive when working with images that are next to text?
  2. How would I implement that?

All tips are welcome!

Upvotes: 0

Views: 2143

Answers (2)

DaniP
DaniP

Reputation: 38262

Don't use your custome class for the img just add the bootstrap class for responsive images

img-responsive

<div class="col-sm-4">
  <img class="img-responsive" src=".....jpg">
</div>

Check this Bootply

Upvotes: 4

DRC
DRC

Reputation: 5048

Simply stated: Bootstrap has the img-responsive class, or you could set max-width: 100% to the img tag.

Upvotes: 2

Related Questions