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

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

以上是关于图片宽度超过视口宽度时如何禁用水平滚动？的主要内容，如果未能解决你的问题，请参考以下文章