CODEWITHSUNDEEP
htmlcssimageresponsive-design
Dexter Schneider
Dexter Schneider

Reputation: 2520

Responsive web design and resizing images

Repsonsive web design works great on most html elements excepts images.I find it a mess. When resizing viewports, you cannot use resizing percentages on an image since it will take on the parent element width and height right. You need to set fixed widths and heights for images...Or am I missing something?

So how exactly do you do a responsive design involving images whose container element/parent will stretch above its native width and shrink below its native width?

Thank you

Upvotes: 11

Views: 22174

Answers (3)

Sherwood Botsford
Sherwood Botsford

Reputation: 1997

What I have done on my site is this:

page stuff....

div class=picr>

img src="/Images/Home/MountainPine.jpg" alt="Mountain Pine" id="mountainpine" >

<p>Caption about mountain pine</p>

/div>

Then in CSS

pic, pic6 {
    float: left;
    }

...

.pic, .picr {
    width: 37%;
    }

#content  img {
    width: 100% ;
    }

So the div class is styled, and the picture is set to fill it. By using the div, then I can also style

within the .pic classes to be distinctive from the body text.

Upvotes: 0

sheriffderek
sheriffderek

Reputation: 9053

well - you can write: .selector img{width: 100%; height: auto;} and then use the size of the div it is in to determine it's scale. or you can also set the image as a background and use similar methods and maybe even mess around with background-size: cover. i'll make a jsfiddle...

.image-w img {
  display: block;
  width: 100%;
  height: auto;
}

Upvotes: 2

Billy Moat
Billy Moat

Reputation: 21050

The done thing in responsive design is to set this in your css for images and some other elements:

img, embed, object, video {
max-width:100%;
    height:auto;
}

Then in your html the image simply takes up the size of it's container.

You do not set the image size itself you just let it grow/shrink itself.

Upvotes: 13

Related Questions