61,124
社区成员
发帖
与我相关
我的任务
分享怎么让在屏幕中间的图片随着屏幕放大缩小
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link href="../download.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="bg">
<div class="Android3x">
<a href="http://www.baidu.com" target="_blank">
<img src="../image/Android3x.png">
</a>
</div>
<div class="ios3x">
<a href="http://www.baidu.com" target="_blank">
<img src="../image/ios3x.png">
</a>
</div>
</div>
</body>
</html>
<--! 下面是我的css代码>
.bg {
padding-top: 130%;
background-image:url(image/download13x.png);
background-size:100%;
background-repeat:no-repeat;
width: 100%;
}
.Android3x img{
margin:0 31%;
}
.ios3x img{
width:auto;
padding-top: 5%;
margin:auto 31%;
padding-bottom: 11%;
}
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link href="../download.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="bg">
<div class="Android3x">
<a href="http://www.baidu.com" target="_blank">
<img src="../image/Android3x.png">
</a>
</div>
<div class="ios3x">
<a href="http://www.baidu.com" target="_blank">
<img src="../image/ios3x.png">
</a>
</div>
</div>
</body>
</html>
<--! 下面是我的css代码>
.bg {
padding-top: 130%;
background-image:url(image/download13x.png);
background-size:100%;
background-repeat:no-repeat;
width: 100%;
}
.Android3x img{
margin:0 31%;
}
.ios3x img{
width:auto;
padding-top: 5%;
margin:auto 31%;
padding-bottom: 11%;
}
...全文
请发表友善的回复…
发表回复
jiangbai333 2016-12-22
- 打赏
- 举报
宽高用百分比设定
父元素宽高也得按照百分比设定！
qq_17476487 2016-12-22
- 打赏
- 举报
还是没用 按照你的方法 我的图片直接左对齐了 没效果
当作看不见 2016-12-22
- 打赏
- 举报
$(window).resize(function(){
$("img").css({"width":window.innerWidth,"height":windowinnerHeight);//把这个按比例调整就好
})
