图片宽度超过视口宽度时如何禁用水平滚动？答案

【问题标题】：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>

我想要一个在左右两侧（移动设备）和上下（对于桌面设备）略微切割的圆圈，所以我认为这是最好的方法，但我观察到页面也以额外的宽度结束在移动设备和桌面设备上的额外高度，我不希望这种情况发生。

有什么办法可以解决这个问题，让圆圈保持切割状态并消除滚动？

【问题讨论】：

标签： html css flexbox css-position viewport

【解决方案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