图片宽度超过视口宽度时如何禁用水平滚动？
Posted
技术标签:
【中文标题】图片宽度超过视口宽度时如何禁用水平滚动？【英文标题】：How to disable horizontal scrolling when picture width exceeds viewport width? 【发布时间】：2021-11-09 17:04:41 【问题描述】：这是我的带有样式的 html：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<style>
html
height: 100vh;
background-color: white;
display: flex;
justify-content: center;
align-items: center;
body
position: absolute;
height: 70vh;
width: 70vh;
background-color: deeppink;
border-radius: 50%;
@media (orientation:landscape)
body
height:70vw;
width:70vw;
</style>
<body></body>
</html>我想要一个在左右两侧（移动设备）和上下（对于桌面设备）略微切割的圆圈，所以我认为这是最好的方法，但我观察到页面也以额外的宽度结束在移动设备和桌面设备上的额外高度，我不希望这种情况发生。
有什么办法可以解决这个问题，让圆圈保持切割状态并消除滚动？
【问题讨论】：
【参考方案1】：在您的html 标签上使用heigth: 100% 和width: 100% 和overflow: hidden。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<style>
html
height: 100%;
width: 100%;
overflow: hidden;
background-color: white;
display: flex;
justify-content: center;
align-items: center;
body
position: absolute;
height: 70vh;
width: 70vh;
background-color: deeppink;
border-radius: 50%;
@media (orientation:landscape)
body
height:70vw;
width:70vw;
</style>
<body></body>
</html>【讨论】：
我在chrome的响应模式下测试sn-p，它不滚动！您的设备尺寸是多少？这也是你的完整例子吗？ @Enceladus android 设备，720x1440，我会发布图片，但我没有足够的代表 我加了你的宽高的图片。 @Enceladus以上是关于图片宽度超过视口宽度时如何禁用水平滚动？的主要内容，如果未能解决你的问题，请参考以下文章
网页制作网页中，如何让背景图片在任何电脑显示频上看都是满屏，宽度刚好的？（没有左右滚动条的）
Xamarin iOS Autolayout：自动调整各种设备的宽度和垂直滚动，同时保持水平滚动禁用演示链接
SwiftUI当总内容宽度小于屏幕宽度时，如何在动态水平滚动视图中居中内容