Generally speaking, the space occupied by the picture depends on its content, that is, how many pixels the picture actually consists of. However, this uncontrolled approach can cause problems in small window sizes. If the window is too small, the picture will open the column, squeeze out the other elements, so that the layout chaos.
The max-width is set to 100%. Here the 100% is relative to the container where the element is located. When set, the picture is either displayed as its actual size or expands to the bounds of the container.
<!doctype html>
<meta charset= "UTF-8" >
<title>hangge.com</title>
<style>
* {
margin:0px;
padding:0px;
}
body{
Background-color: #EFEFEF;
}
. leftcolumn {
width:31.3%;
margin-left:2%;
margin-right:2%;
Float:left;
Background-color:yellow;
}
. rightcolumn {
width:62.7%;
margin-right:2%;
Float:left;
Background-color: #7FFF9B;
}
. colomncontent {
border:1px solid Gray;
height:210px;
}
IMG {
max-width:100%;
}
</style>
<body>
<div class= "Leftcolumn" >
<div class= "Colomncontent" >
Left
</div>
</div>
<div class= "Rightcolumn" >
<div class= "Colomncontent" >
Right
</div>
</div>
</body>
2, add the outer margin around the picture
If you want to add a little margin around the picture, you must set a percentage value for Margin-left and Margin-right, and make sure that you add max-width equal to 100% (no more than)
IMG {
max-width:90%;
margin-left:5%;
margin-right:5%;
}
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
