<html><head>
<meta charset="utf-8">
<title>filter blur</title>
<style>
/*.food-content{
width:100px;
}
//换可以通过控制这个div来控制整个图片的大小，配上下面的样式就可以得到一个宽高一样的图片，下面最重要的代码就是： width: 100%;
padding-top: 100%;这两句了
*/
.image-header{
position: relative;
width: 100%;
padding-top: 100%;
height:0;
}
img{
position: absolute;
top: 0;
left:0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="food-content">
<div class="image-header" >
<img src="1.jpg">
</div>
</div>
</body></html>
<meta charset="utf-8">
<title>filter blur</title>
<style>
/*.food-content{
width:100px;
}
//换可以通过控制这个div来控制整个图片的大小，配上下面的样式就可以得到一个宽高一样的图片，下面最重要的代码就是： width: 100%;
padding-top: 100%;这两句了
*/
.image-header{
position: relative;
width: 100%;
padding-top: 100%;
height:0;
}
img{
position: absolute;
top: 0;
left:0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="food-content">
<div class="image-header" >
<img src="1.jpg">
</div>
</div>
</body></html>
扫一扫
3106
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
