Seb*_*rke 11 css containers image jsfiddle
我想让容器宽度缩小到图像的大小.高度以相对于浏览器窗口的百分比给出.
.img
{
width: auto;
height:100%;
}
.container
{
height:100%;
width:auto;
}
这是小提琴:
display:table,就像在类似的情况下不起作用,因为作为表格单元格,图像始终显示其原始大小的100%.
我想我可以更好地解决这个问题。请检查我的代码：
<!DOCTYPE HTML>
<html>
<head>
<title>Knowledge is Power</title>
<style type="text/css">
* {
-webkit-box-sizing: border-box; /* Android = 2.3, iOS = 4 */
-moz-box-sizing: border-box; /* Firefox 1+ */
box-sizing: border-box; /* Chrome, IE 8+, Opera, Safari 5.1 */
}
html, body
{
height:100%;
width:100%;
padding:10px;
}
.container {
padding:0;
background:green;
}
.img {
display: inline;
height:100%;
}
</style>
</head>
<body>
<span class="container">
<img class="img" src="a.jpg"/>
</span>
</body>
</html>