CSS 宽度问题

This topic created in 2948 days ago, the information mentioned may be changed or developed.

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

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

宽度

CSS

滚动

横向

14 replies • 2018-10-17 16:50:30 +08:00

biabia123456

Oct 17, 2018

图片问题

biabia123456

Oct 17, 2018

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

rabbbit

Oct 17, 2018

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

CSGO

Oct 17, 2018

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

wu67

Oct 17, 2018

把 img 当 background-image 用试试

CSGO

Oct 17, 2018

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

CSGO

Oct 17, 2018

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

rabbbit

Oct 17, 2018

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

CSGO

Oct 17, 2018

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

rabbbit

Oct 17, 2018

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

rabbbit

Oct 17, 2018

CSGO

Oct 17, 2018

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

gzf6

Oct 17, 2018

img {

object-fit: contain;

}

gzf6

Oct 17, 2018

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