图片等比例缩放方案

图片等比例缩放方案

Web开发时无可避免的需要将图片进行缩放,缩放时需要保证图片不变形,也就是需要等比例缩放。

设定宽度或高度

引入图片时,仅设置图片的width或者是height就可以使另一边自适应,从而实现等比例缩放。

html 复制代码
<section>
    <img id="t1" src="http://www.sdust.edu.cn/__local/9/7A/B1/F29B84DEF72DD329997E8172ABA_664BA3EF_32466.jpg">
    <img id="t2" src="http://www.sdust.edu.cn/__local/B/F3/E4/693AB931C9FFB84646970D53BFE_C506394A_4282CA.jpg">
</section>
<style type="text/css">
    #t1{
        width: 500px;
    }
    #t2{
        height: 300px;
    }
</style>

设定最大宽度或最大高度

引入图片时,仅设置图片的max-width或者是max-height就可以使另一边自适应,从而实现等比例缩放。

html 复制代码
<section>
    <img id="t3" src="http://www.sdust.edu.cn/__local/F/7A/AA/E1459849AA8AB0C89854A41BD41_BF3BD857_BC0D8.jpg">
    <img id="t4" src="http://www.sdust.edu.cn/__local/1/95/CB/EDC1450B8FD1B8A25FAAC726AA4_A36D4253_16C91.jpg">
</section>
<style type="text/css">
    #t3{
        max-width: 500px;
    }
    #t4{
        max-height: 300px;
    }
</style>

根据父容器适应

将图片设定为max-width: 100%;max-height: 100%;,就可以自适应父容器宽高进行等比缩放。

html 复制代码
<section>
    <div id="t5">
        <img src="http://www.sdust.edu.cn/__local/9/7A/B1/F29B84DEF72DD329997E8172ABA_664BA3EF_32466.jpg">
    </div>
</section>
<style type="text/css">
    #t5{
        height: 300px;
        width: 600px;
        border: 1px solid #eee;
        display: flex;
        justify-content: center;
    }
    #t5 > img{
        max-width: 100%;
        max-height: 100%;
    }
</style>

使用Js设定宽高

使用JavaScript预先取得图片并根据指定的高度或者是宽度计算缩放比,从而计算出另一边的长度,设定好宽高后加入文档。

html 复制代码
<section>
    <div id="t6"></div>
</section>
<script type="text/javascript">
    var img = new Image();
    var height = 300;
    img.src = "http://www.sdust.edu.cn/__local/B/F3/E4/693AB931C9FFB84646970D53BFE_C506394A_4282CA.jpg";
    img.onload = function(){
        var scale = height / this.height;
        this.height = height;
        this.width = this.width * scale;
        document.getElementById("t6").appendChild(this);
    }
</script>

使用CSS背景属性

使用CSSbackground属性进行等比缩放。

html 复制代码
<section>
    <div id="t7"></div>
</section>
<style type="text/css">
    #t7{
        height: 300px;
        width: 600px;
        border: 1px solid #eee;
        background: url("http://www.sdust.edu.cn/__local/F/7A/AA/E1459849AA8AB0C89854A41BD41_BF3BD857_BC0D8.jpg") center center no-repeat;
        background-size: contain;
    }
</style>

使用CSS转换属性

使用CSStransform属性直接进行缩放。

html 复制代码
<section>
    <div id="t8">
        <img src="http://www.sdust.edu.cn/__local/1/95/CB/EDC1450B8FD1B8A25FAAC726AA4_A36D4253_16C91.jpg">
    </div>
</section>
<style type="text/css">
    #t8{
        height: 300px;
        width: 500px;
        overflow: hidden;
    }
    #t8 > img{
        transform: scale(0.6);
        transform-origin: 0 0;
    }
</style>

使用CSS适应属性

使用CSSobject-fit属性直接进行图片适应缩放。

html 复制代码
<section>
    <div id="t9">
        <img src="http://www.sdust.edu.cn/__local/F/7A/AA/E1459849AA8AB0C89854A41BD41_BF3BD857_BC0D8.jpg">
    </div>
</section>
<style type="text/css">
    #t9{
        height: 300px;
        width: 600px;
        border: 1px solid #eee;
        display: flex;
        justify-content: center;
    }
    #t9 > img{
        object-fit: contain;
    }
</style>

代码示例

html 复制代码
<!DOCTYPE html>
<html>
<head>
    <title>图片等比例缩放</title>
    <style type="text/css">
        #t1{
            width: 500px;
        }
        #t2{
            height: 300px;
        }

        #t3{
            max-width: 500px;
        }
        #t4{
            max-height: 300px;
        }

        #t5{
            height: 300px;
            width: 600px;
            border: 1px solid #eee;
            display: flex;
            justify-content: center;
        }
        #t5 > img{
            max-width: 100%;
            max-height: 100%;
        }

        #t7{
            height: 300px;
            width: 600px;
            border: 1px solid #eee;
            background: url("http://www.sdust.edu.cn/__local/F/7A/AA/E1459849AA8AB0C89854A41BD41_BF3BD857_BC0D8.jpg") center center no-repeat;
            background-size: contain;
        }

        #t8{
            height: 300px;
            width: 500px;
            overflow: hidden;
        }
        #t8 > img{
            transform: scale(0.6);
            transform-origin: 0 0;
        }

        #t9{
            height: 300px;
            width: 600px;
            border: 1px solid #eee;
            display: flex;
            justify-content: center;
        }
        #t9 > img{
            object-fit: contain;
        }
    </style>
</head>
<body>
    <section>
        <img id="t1" src="http://www.sdust.edu.cn/__local/9/7A/B1/F29B84DEF72DD329997E8172ABA_664BA3EF_32466.jpg">
        <img id="t2" src="http://www.sdust.edu.cn/__local/B/F3/E4/693AB931C9FFB84646970D53BFE_C506394A_4282CA.jpg">
    </section>

    <section>
        <img id="t3" src="http://www.sdust.edu.cn/__local/F/7A/AA/E1459849AA8AB0C89854A41BD41_BF3BD857_BC0D8.jpg">
        <img id="t4" src="http://www.sdust.edu.cn/__local/1/95/CB/EDC1450B8FD1B8A25FAAC726AA4_A36D4253_16C91.jpg">
    </section>

    <section>
        <div id="t5">
            <img src="http://www.sdust.edu.cn/__local/9/7A/B1/F29B84DEF72DD329997E8172ABA_664BA3EF_32466.jpg">
        </div>
    </section>

    <section>
        <div id="t6"></div>
    </section>

    <section>
        <div id="t7"></div>
    </section>

    <section>
        <div id="t8">
            <img src="http://www.sdust.edu.cn/__local/1/95/CB/EDC1450B8FD1B8A25FAAC726AA4_A36D4253_16C91.jpg">
        </div>
    </section>

    <section>
        <div id="t9">
            <img src="http://www.sdust.edu.cn/__local/F/7A/AA/E1459849AA8AB0C89854A41BD41_BF3BD857_BC0D8.jpg">
        </div>
    </section>
</body>
<script type="text/javascript">
    var img = new Image();
    var height = 300;
    img.src = "http://www.sdust.edu.cn/__local/B/F3/E4/693AB931C9FFB84646970D53BFE_C506394A_4282CA.jpg";
    img.onload = function(){
        var scale = height / this.height;
        this.height = height;
        this.width = this.width * scale;
        document.getElementById("t6").appendChild(this);
    }
</script>
</html>

每日一题

arduino 复制代码
https://github.com/WindrunnerMax/EveryDay
相关推荐
努力只为躺平3 分钟前
一文搞懂 Promise 并发控制:批量执行 vs 最大并发数,实用场景全解析!
前端·javascript
李大玄5 分钟前
Google浏览器拓展工具 "GU"->google Utils
前端·javascript·github
爱编程的喵5 分钟前
从DOM0到事件委托:揭秘JavaScript事件机制的性能密码
前端·javascript·dom
蓝倾11 分钟前
京东批量获取商品SKU操作指南
前端·后端·api
JSLove18 分钟前
常见 npm 报错问题
前端·npm
sunbyte18 分钟前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | ContentPlaceholder(背景占位)
前端·javascript·css·vue.js·tailwindcss
爱学习的茄子19 分钟前
React Hooks进阶:从0到1打造高性能Todo应用
前端·react.js·面试
知性的小mahua23 分钟前
vue3+canvas实现摄像头ROI区域标记
前端
嘗_39 分钟前
暑期前端训练day5
前端
uncleTom6661 小时前
前端布局利器:rem 适配全面解析
前端