Just practicing with fluid images.In the following code, I managed to get the image scale up/down with the browser window. The image is inserted inside the .bigcontainer div. max-width is used to achieve the scaling of the image along with windows. I have kept the background color of the .bigcontainer div as grey (just for identification purposes).
If you notice, the .bigcontainer div flows out slightly at the bottom of the image. This results in the grey color flowing out slightly at the bottom of the image. I want the div to fit (wrap) around the image perfectly. I don't know why is this happening.
Would appreciate inputs.
html,body {
margin: 0px;
height: 100%;
/* [disabled]width: 100%; */
left: 0px;
top: 0px;
background-color: rgba(255,255,255,1);
}
.wrapper {
text-align: center;
margin-top: 0;
margin-left: auto;
height: 100%;
max-width: 960px;
background-color: rgba(0,0,0,1);
margin-right: auto;
}
.bigcontainer {
display: block;
/* [disabled]border: 1px solid black; */
margin-top: 0px;
margin-right: 8.33%;
margin-left: 8.33%;
background-color: rgba(204,204,204,1);
max-width: 100%;
font-size: xx-large;
color: rgba(255,255,255,1);
top: 0px;
height: auto;
}
.bigcontainer img{
max-width:100%;
max-height:100%;
}
.text {
height: auto;
width: auto;
color: rgba(255,255,255,1);
}<div class="wrapper">
<div class="bigcontainer">
<img src="http://i1062.photobucket.com/albums/t482/gautam_official/royal-enfield-motorcycle-2x_zpswmyloqvc.jpg" alt="enfield">
</div>
<div class="text">
This is text. Its in center
</div>
</div>