Why does html,body {height 100%} affect both width and height, but width 100% only affects width?
Question
Given the following code, why does html,body {height:100%} allows the image to be responsive (allows measurements of its children to be written in percentage + works) at both height and width properties, but html, body{width:100%} only allows width to be responsive? If you could go in bit of detail how the browser treats width/height:auto (which I believe is the default value if nothing is selected), that would be great!
JSBin: https://jsbin.com/dafejayasi/edit?html,output
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
html, body{
height: 100%;
margin:0;
padding:0;
}
.image{
height:40%;
width:50%;
}
</style>
<body>
<img class = "image" src="http://www.placehold.it/700x300" alt="Image of storefront">
</body>
</html>
1 answers
solution1
0 2016-09-03 03:24:18
by doing body's or html's width 100% or height 100% or both in together does not effect on anything on the body in this case !
Now given code will give you a brief understanding about how percentage works in browser
.image{
width:100%;
//height not mention!
}
in this case browser will select the height auto , that means the actual height of the image. when only if width change then height will change according to the the width. if width goes bigger height will goes bigger . nothing matters if only height changes
.image{
height:100%;
//width not mention
}
now exact opposite case will be happen of above !
.image{
width:100%;
height:100%;
}
here if width changes it will not effect on height and vice versa ! thanks!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.