Scheme for proportional scaling of images

When developing for the web, it is inevitable to need to scale images, and when scaling, it is necessary to ensure that the images do not deform, that is, proportional scaling is required.

Setting the width or height

When importing images, simply setting the width or height of the image can make the other side adapt accordingly, thus achieving proportional scaling.

<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>

Setting the maximum width or maximum height

When importing images, simply setting the max-width or max-height of the image can make the other side adapt accordingly, thus achieving proportional scaling.

<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>

Adapting to the parent container

By setting the image to max-width: 100%; and max-height: 100%;, it can adapt to the width and height of the parent container and achieve proportional scaling.

<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>

Setting Width and Height Using JavaScript

Use JavaScript to pre-load the image and calculate the scaling ratio based on the specified height or width, in order to determine the length of the other side. After setting the width and height, add it to the document.

<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>

Using CSS Background Property

Use the background property in CSS for proportional scaling.

<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>

Using CSS Transform Property

Use the transform property in CSS for direct scaling.

<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>

Using CSS Object-Fit Property

Use the object-fit property in CSS for image scaling.

<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>

Code Example

<!DOCTYPE html>
<html>
<head>
    <title>Image Proportional Scaling</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>

Daily Question

https://github.com/WindrunnerMax/EveryDay