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

网页背景图片如何自适应,不拉伸,不显示不全,+repeat

  •  
  •   lxk11153 · 2020-06-01 22:32:43 +08:00 · 1003 次点击
    这是一个创建于 1628 天前的主题,其中的信息可能已经有所发展或是发生改变。
    • 假设图片大小为: 20*20
    • 屏幕 1: 200*300
      • 图片缩放至: 200*200, 竖向 repeat 一次(多出的部分不要)
    • 屏幕 2: 300*200
      • 图片缩放至: 200*200, 横向 repeat 一次(多出的部分不要)
    4 条回复    2020-06-01 23:25:10 +08:00
    codehz
        1
    codehz  
       2020-06-01 23:05:54 +08:00 via Android
    不就是 background-size: contain;?
    lxk11153
        2
    lxk11153  
    OP
       2020-06-01 23:09:44 +08:00
    应该是这个 background-size: contain; 但不知为何加在 body 上不行?
    https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
    yafoo
        3
    yafoo  
       2020-06-01 23:14:18 +08:00 via Android
    你这需求比较特殊,估计纯 css 难以实现,还是配合 js 搞吧
    lxk11153
        4
    lxk11153  
    OP
       2020-06-01 23:25:10 +08:00
    @codehz #1
    @yafoo #3 好吧,测试页面没加任何东西,导致 body height=0, 看不出东西。233
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1230 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 18:20 · PVG 02:20 · LAX 10:20 · JFK 13:20
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.