在浏览器中显示，如何去除横向滚动
来源：7-2 编程练习
weixin_慕勒4393907
2020-05-17 21:13:45
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.main{
width:100%;
position: absolute;
}
.img{
width: 100%;
}
.img1,.img2{
position: fixed;
top: 40%;
margin: auto 0;
}
.img1{
right: 0px;
}
.img2{
left: 0px;
}
</style>
</head>
<body>
<div class="main">
<img class="img" src="http://climg.mukewang.com/59c9f7ce0001839219034033.png">
<img class="img1" src="http://climg.mukewang.com/5a3383c70001f1b702240364.png">
<img class="img2" src="http://climg.mukewang.com/5a3383d00001a3dd02240364.png">
</div>
</body>
</html>
可能主图片太大了，所有在浏览器中可以横向滚动一点点，但是明明给图片设置了width:100%，为什么依然可以滚动?有没有好的解决方案，使得图片正好占满整个浏览器，而没有横向滚动效果
1回答
-
同学你好，1.是因浏览器生成的外边距导致的横向滚动条，同学使用*选择器将外边距修改为0。修改后代码如下所示：
2. 练习要求左右块元素相对于窗口垂直居中，则建议同学为其设置固定高度，并先设置上边距为50%，然后往回移动img高度的一半，使其垂直居中。修改后代码如下所示：
如果我的回答解决了你的疑惑，请采纳！祝学习愉快！
0
相似问题
回答 1
回答 1