CODEWITHSUNDEEP
csshtmlimage
user-44651
user-44651

Reputation: 4124

Images are not responsive to Max-Width property

I'm attempting to get my 'Slider' images to be more responsive. I'm fairly certain my issue is an inheritance problem.

If the 'slider' image is pulled out of the container div, they will resize based upon the window size.

However, the images do not resize to fit the window when in the div.

I have even tried inline css style="max-width:100%;" in the img tag, but it will not resize.

I have tried multiple variations to get the image to be more fluid.

Any help?

HTML

<div id="container">
  <div id="slider"><img src="img/img1.png" /></div>
</div>

CSS

body {
    background-color: #f2f2f2;
    height:100%;
}


#container {
    margin-right: auto;
    margin-left: auto;
    width: 960px;
    min-height:100%;
    position:relative;
}

#slider img {
    max-width: 100%;
    height: auto;
}

Upvotes: 1

Views: 7363

Answers (2)

Sachin Kanungo
Sachin Kanungo

Reputation: 1064

body {
  background-color: #f2f2f2;
  height: 100%;
}
#container {
  margin: 0 auto;
  max-width: 960px;
  text-align: center;
  /* Only if you want text in there */
}
#slider img {
  max-width: 100%;
  height: auto;
}
<div id="container">
  <div id="slider">
    <img src="http://dummyimage.com/1000x300/000000/fff.jpg&text=Slide3" />
  </div>
</div>

Here is a codepen of your problem http://codepen.io/sachya/pen/EutdJ

Upvotes: 3

schaenk
schaenk

Reputation: 672

Have you tried using the width instead of the max-width property?

#slider img {
  width: 100%;
  height: auto;
}

Do you have a url to see what you are trying to do?

Upvotes: -2

Related Questions