How to create a responsive div with img in it? - css

Question

i would like to create a responsive div(box1) which should fit to its content size automatically and also i have a restriction for that content which should not exceed certain value(width and height) of box1 here i give 600x300.
Here is the code and example
.box1
{
width:auto;
height:auto;
background-color:chocolate;
margin-left:auto;
margin-right:auto;
max-width: 600px;
max-height:300px;
padding:5px;
}
I used max-width :600px; and max-height:300px; so the content inside it won't exceed above box1 according to my belief.
.box1 img
{
max-width: 100%;
max-height: 100%;
}
Here image inside box1 won't exceed box1 width and height.
Now
1) if the image is higher than box1 width and height of 600x300px let say 750x750px in this case image should fit in box1 with 600x300px
2) if the image is lesser than 600x300px let say 200x150px then the box1 should adjust automatically to the image size.
How this can be achieved? what wrong in my code to this concept? can anybody help?

Answer 1

Here is one way of doing it using CSS
Consider the following HTML, I am including four images of various aspect ratios to illustrate that this works. The .wrap element is to show you you might center the image within its parent block.
<div class="wrap">
<div class="box1">
<img src="http://www.placekitten.com/500/500">
</div>
</div>
<div class="wrap">
<div class="box1">
<img src="http://www.placekitten.com/800/200">
</div>
</div>
<div class="wrap">
<div class="box1">
<img src="http://www.placekitten.com/200/800">
</div>
</div>
<div class="wrap">
<div class="box1">
<img src="http://www.placekitten.com/200/200">
</div>
</div>
The trick is to set display: inline-block for .box1, which will force it to shrink to fit the content subject to the max-width and max-height constraints.
.box1 {
width:auto;
height: auto;
max-width: 600px;
max-height: 300px;
background-color:chocolate;
padding:5px;
display: inline-block;
}
To get the image to scale correctly, simply inherit the max-width and max-height values:
.box1 img {
vertical-align: top;
max-width: inherit;
max-height: inherit;
}
Use vertical-align: top to get rid of any white space near the image tag.
Finally, since .box1 is an inline-block, you can center it within its parent container using text-align: center:
.wrap {
border: 1px dotted gray;
margin: 1.00em 0;
text-align: center;
}
The demo fiddle is at: http://jsfiddle.net/audetwebdesign/hpbdC/

Answer 2

img {
width: 100%;
height: auto;
max-height: 100%;
}
should work (I assume you want keep aspect ratio)

Answer 3

By default box1 is treated as a display: block element. If you change that display type to an inline-block (ex: display: inline-block) it would be treated as an adjustable item.
Do keep in mind that you are setting the max height of the box to 300px. Therefore, the image's max-height is three hundred. In the case of a 750px by 750px image, it will be resized to a 300px by 300px image (and so will the box).

Answer 4

Why do you need the wrapping div? You can achieve this by only styling the image: http://jsfiddle.net/Rv7JG/1/
img {
max-width: 600px;
max-height: 300px;
height: auto;
width: 100%;
padding: 5px;
background: chocolate;
}