无法使用 flex 在左侧和居中的图像上滚动

Posted 2023-03-29

【中文标题】无法使用 flex 在左侧和居中的图像上滚动

【英文标题】：Cannot scroll on the left an centered img with flex

【发布时间】：2020-12-10 20:15:56

【问题描述】：

我已经阅读了很多文章，这些文章描述了如何将比 div 容器更大的 img 居中。但我还需要水平滚动该图像（特别是对于移动设备），我无法解释自己的行为以及如何解决它。

我使用 flex（通过引导类）：

<section id="container">
    <div class="for-mobile d-md-none d-flex overflow-auto justify-content-center">
        <img src="image_bigger_than_div"/>
    </div>
<section>

附加CSS：

.for-mobile img  flex:none 

图像居中，我可以在右侧滚动，但不能在左侧滚动。如果我将弯曲方向更改为反向行，则会发生相反的行为。 为什么？请问这个怎么解决？

谢谢

注意： 如果我不“对齐内容：居中”，则 img 不会居中，我可以滚动整个图像。

【参考方案1】：

代码对我来说运行良好我不得不关闭部分标记，就像代码 sn-p 中所示。

我还在图像中添加了 img-fluid 类以使其具有响应性，但如果您想滚动，只需删除该类即可。

<section id="container">
    <div class="for-mobile d-md-none d-flex overflow-auto justify-content-center">
        <img class="img-fluid" src="assets/images/image.jpg" />
    </div>
</section>

而且我可以毫无问题地左右滚动...

我也认为不需要您提供的 CSS 代码。

【讨论】：

感谢您的回答。我不希望 img 响应，因为我只想在移动设备上看到图像的一部分，如果用户想要查看更多图像，则滚动它。你如何检查它是否正常工作？我使用 chrome devtool 来模拟移动设备。我对 Firefox devtool 有同样的行为。 Firefox 需要添加的 css。

我使用 Chrome，您可以通过任何方式删除 img-fluid 类，并且您可以上下左右滚动没有任何问题，但我认为这不是一个好习惯

太奇怪了...如果有原因，我会检查父标签。无论如何谢谢:-)

看到一个 jsfiddle，我可以重现我的 pb。手机屏幕看不到左边：jsfiddle.net/Laurent001/mu9s8jkw 横向缩小img越少，看到左边越少（不能滚动）

你确定它对你有用吗，因为在以前的 jsfiddle 和这个 codepen 上，我无法访问左侧的 img。 codepen.io/Laurent001/pen/bGpgver