V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
CSGO
V2EX  ›  问与答

CSS 宽度问题

  •  
  •   CSGO · 2018-10-17 12:10:23 +08:00 · 1352 次点击
    这是一个创建于 2228 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

    14 条回复    2018-10-17 16:50:30 +08:00
    biabia123456
        1
    biabia123456  
       2018-10-17 12:58:43 +08:00
    图片问题
    biabia123456
        2
    biabia123456  
       2018-10-17 13:00:09 +08:00   ❤️ 1
    @biabia123456 #1 你试试在小屏的时候加上
    img {
    width: 100%;
    }
    应该就没问题了
    rabbbit
        3
    rabbbit  
       2018-10-17 13:10:44 +08:00   ❤️ 1
    .wifi-help-img img {
    max-width: 100%;
    }
    CSGO
        4
    CSGO  
    OP
       2018-10-17 13:45:24 +08:00
    @rabbbit 我加上了,但是如果继续缩小,当缩小到比图片宽度还小后,图片如何才能也会缩小?
    wu67
        5
    wu67  
       2018-10-17 13:49:10 +08:00
    把 img 当 background-image 用试试
    CSGO
        6
    CSGO  
    OP
       2018-10-17 13:53:02 +08:00
    @rabbbit 图片那个 div 宽度最小只能 297.875 ,这是怎么回事?
    CSGO
        7
    CSGO  
    OP
       2018-10-17 13:56:21 +08:00
    @wu67 background-image 的话图片太多,都加到 css 里,很麻烦。
    rabbbit
        8
    rabbbit  
       2018-10-17 14:03:03 +08:00
    @CSGO
    继续缩小是啥意思? 缩小浏览器尺寸,让视口宽度小于图片宽度?
    max-width: 100% 的作用是规定图片的最大宽度为父元素宽度的 100%,.当父元素宽度小于图片原尺寸时,图片自动缩小.
    CSGO
        9
    CSGO  
    OP
       2018-10-17 14:15:43 +08:00
    @rabbbit 而且缩小后,高度不会自适应,图片会被拉伸。
    rabbbit
        10
    rabbbit  
       2018-10-17 14:21:33 +08:00
    把.wifi-help-img 里的 flex 去掉, 用 margin: auto 居中
    rabbbit
        11
    rabbbit  
       2018-10-17 14:28:46 +08:00
    CSGO
        12
    CSGO  
    OP
       2018-10-17 16:44:23 +08:00
    @rabbbit 可以了,这些好不理解啊,几乎是试出来的
    gzf6
        13
    gzf6  
       2018-10-17 16:49:33 +08:00
    img {

    object-fit: contain;

    }
    gzf6
        14
    gzf6  
       2018-10-17 16:50:30 +08:00
    还有个 object-position 用来调位置,用法和背景图哪个一样
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   4539 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 09:57 · PVG 17:57 · LAX 01:57 · JFK 04:57
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.