CSS 宽度问题

[CSGO]

https://www.wangyifang.com/web/xiaofu/2.2/help.html

谁能帮忙看下为什么浏览器宽度缩小后，并不能一直自适应，到了一定小的宽度后，就会有横向滚动，这是为什么呢？

[biabia123456]

图片问题

[biabia123456]

@biabia123456 #1 你试试在小屏的时候加上
img {
width: 100%;
}
应该就没问题了

[rabbbit]

.wifi-help-img img {
max-width: 100%;
}

[CSGO]

@rabbbit 我加上了，但是如果继续缩小，当缩小到比图片宽度还小后，图片如何才能也会缩小？

[wu67]

把 img 当 background-image 用试试

[CSGO]

@rabbbit 图片那个 div 宽度最小只能 297.875 ，这是怎么回事？

[CSGO]

@wu67 background-image 的话图片太多，都加到 css 里，很麻烦。

[rabbbit]

@CSGO
继续缩小是啥意思? 缩小浏览器尺寸,让视口宽度小于图片宽度?
max-width: 100% 的作用是规定图片的最大宽度为父元素宽度的 100%,.当父元素宽度小于图片原尺寸时,图片自动缩小.

[CSGO]

@rabbbit 而且缩小后，高度不会自适应，图片会被拉伸。

[rabbbit]

把.wifi-help-img 里的 flex 去掉, 用 margin: auto 居中

[rabbbit]

[CSGO]

@rabbbit 可以了，这些好不理解啊，几乎是试出来的

[gzf6]

img {

object-fit: contain;

}

[gzf6]

还有个 object-position 用来调位置，用法和背景图哪个一样