咔叽游戏

 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
查看: 790|回复: 0

[CSS] 如何使用 resize 实现图片切换预览功能

[复制链接]
  • TA的每日心情
    无聊
    2019-5-27 08:20
  • 签到天数: 4 天

    [LV.2]圆转纯熟

    发表于 2022-1-5 15:23:31 | 显示全部楼层 |阅读模式
    关键点

      CSS resize 属性允许你控制一个元素的可调整大小性配合 resize 实现子元素的动态宽度
    HTML:
    1. <div class='picA'>
    2.     <div class='picB'>
    3.         <div readonly class='resizeElement'></div>
    4.     </div>
    5. </div>
    复制代码
    SCSS:
    [code]html {
        background: #ddd;
        height: 100%;
        width: 100%;
    }
    .picA {
        background-image: url(https://z3.ax1x.com/2021/08/17/fhJdpQ.png);
        background-size: cover;
        width: 650px;
        height: 340px;
        border: 5px solid #f0e5ab;
        border-radius: 3px;
        box-shadow: 0 0 1px #999, -2px 2px 3px rgba(0, 0, 0, 0.2);
        padding: 0;
        margin: 1rem auto;
        position: relative;
        overflow: hidden;
    }
    .picB {
        background-image: url(https://z3.ax1x.com/2021/08/17/fhJUfg.png);
        background-size: cover;
        height: 340px;
        position: absolute;
        top: 0;
        left: 0;
        min-width: 0;
        max-width: 650px;
        box-sizing: border-box;
    }
    .picB:before {
        content: "
    如何使用 resize 实现图片切换预览功能-1.jpg

    QQ|免责声明|小黑屋|手机版|Archiver|咔叽游戏

    GMT+8, 2024-3-28 22:33

    Powered by Discuz! X3.4

    © 2001-2023 Discuz! Team.

    快速回复 返回顶部 返回列表