61,112
社区成员
发帖
与我相关
我的任务
分享div自适应浏览器窗口
请教各位大侠，我有一个div1，div1里面有一个div2，div2里放一张图片，需求是这张图片能自适应浏览器窗口的大小，浏览器窗口大时，图片尺寸显示大，浏览器窗口小时，图片尺寸显示小。新手，就是调试不成功呢
我的代码，放在div2里的logo不能随浏览器窗口的变化而缩放，我想让它随窗口变化而缩放，请假各位了。
body{
margin:0px;
padding:0px;
position:relative;
}
.div1{
height:130px;
width:100%;
background-image:url(qtxImg/white1920.jpg);
position:relative;
}
.div2 {
width:116px;
height:98px;
position: absolute;
top: 13%;
left: 25%;
}
<body>
<div class="div1">
<div class="div2">
<img style="display:block;width:100%;height:100%" src="qtxImg/logo.jpg">
</div>
</div>
</body>
我的代码，放在div2里的logo不能随浏览器窗口的变化而缩放，我想让它随窗口变化而缩放，请假各位了。
...全文
请发表友善的回复…
发表回复
tangwwip 2016-09-08
- 打赏
- 举报
做成响应式的就行了
zhangsheng_1992 2016-09-08
- 打赏
- 举报
两种办法
第一种 div1和div2 img的宽高都给成百分比 不要用固定像素 注意 假设你div1给50%的宽 那么div2也给百分之50
那么由于div2是div1的自元素 所以说相对页面宽度来说 假设页面宽度为1000 那么div1的宽 = 1000*50% = 500
div2的宽等于div1的宽乘百分之50 即1000*50%＊50％ = 250 图片一样 这样当页面大小变化时元素会自动调整大小
第二种
用css的@ media属性指定
比如
@media screen and (max-width: 300px) {
body {
background-color:lightblue;
}
//div1 div2的样式
}
青鬆下的坚躯 2016-09-08
- 打赏
- 举报
css3 响应式图片大小，http://www.runoob.com/css3/css3-images.html
