Responsive Web: About flexible image in HTML and CSS

Today, i am developing a responsive design website using HTML5 and CSS3. I came across a problem i.e image display is exceeding the width and height of the parent element container. Let me explain with an example

<div style="width: 15%">
    <img src= "myimage.jpg"/>
</div>

image (myimage.jpg) is of size 350x480 pixels, Following is the output

you can see the image display is exceeds the width and height of <div> width 15%. In order to make the image not to exceeds the parent element container. you need to set the CSS max-width property.

Here is the CSS code max-width property set for <img>

img{
      max-width: 100%;
}

Here is the output you can see the image is not exceeding the parent <div> element container.

 

Hope, you enjoyed this post