CODEWITHSUNDEEP
htmlcssimagewidth
Adam Bell
Adam Bell

Reputation: 1045

CSS: Make img fit completely in div

Working on a news site and once I get to mobile, I'd like it where the image fits inside the entire width of the div....whatever that might be. The images are originally 240px in width so we are talking about bumping them up. This is what I'm currently using:

.thumb { float: left; clear: both; width: 100%; height: auto; margin: 0; }
.thumb img { max-width: 100%; max-height: 100%; }

So on my iPhone, the pic it a little bit too small since the div is 320px and the img is 240. Of course, this would change for say, landscape at 480px for example. So it needs to be flexible. Any suggestions?

Upvotes: 0

Views: 69

Answers (3)

Harshana Samaranayake
Harshana Samaranayake

Reputation: 504

This is very simple as like this. 

img {
    width:100%;
}
div{
    float: left; clear: both; width: 100%; height: auto; margin: 0; 
}
<div>
    <img src="http://www.keenthemes.com/preview/conquer/assets/plugins/jcrop/demos/demo_files/image2.jpg" />
</div>

Upvotes: 0

Marc Audet
Marc Audet

Reputation: 46785

You might try the following, set the image width to 100%. 

.thumb {
  float: left;
  clear: both;
  width: 100%;
  height: auto;
  margin: 0;
}
.thumb img {
  width: 100%;
}
<div class="thumb">
  <img src="http://placehold.it/200x100">
</div>

Upvotes: 1

Gonzalo
Gonzalo

Reputation: 39

@media screen and (max-width: 480px) //place whatever the resolution you are working here{
  /*enter your code here for this resolution*/
}

to learn more about media queries

Upvotes: 0

Related Questions