如何解决无法使用flex
我已经阅读了很多文章,描述了如何将比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 }
图像居中对齐,我可以在右侧滚动,但不能在左侧滚动。如果我将伸缩方向更改为反向行,则会发生相反的行为。 为什么?请问该如何解决?
Thx
注意: 如果我没有“ justify-content:center”,则img不会居中,并且我可以滚动整个图像。
解决方法
代码对我来说很好,我不得不关闭代码段中的section标签。
我还向图像添加了类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代码。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。