CSS 宽度问题

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

V2EX 提问指南

这是一个创建于 2223 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

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

宽度

CSS

滚动

横向

14 条回复 • 2018-10-17 16:50:30 +08:00

biabia123456

2018-10-17 12:58:43 +08:00

图片问题

biabia123456

2018-10-17 13:00:09 +08:00

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

rabbbit

2018-10-17 13:10:44 +08:00

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

CSGO

2018-10-17 13:45:24 +08:00

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

wu67

2018-10-17 13:49:10 +08:00

把 img 当 background-image 用试试

CSGO

2018-10-17 13:53:02 +08:00

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

CSGO

2018-10-17 13:56:21 +08:00

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

rabbbit

2018-10-17 14:03:03 +08:00

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

CSGO

2018-10-17 14:15:43 +08:00

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

rabbbit

2018-10-17 14:21:33 +08:00

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

rabbbit

2018-10-17 14:28:46 +08:00

CSGO

2018-10-17 16:44:23 +08:00

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

gzf6

2018-10-17 16:49:33 +08:00

img {

object-fit: contain;

}

gzf6

2018-10-17 16:50:30 +08:00

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