background-size: contain คือคำสั่งอะไร

background-size: contain คือคำสั่งกำหนดให้แสดงผลรูปภาพแบบขยายเต็มพื้นที่การแสดงผล หากเหลือพื้นที่ว่างจะมีการทำซ้ำของรูปภาพ เพื่อให้รูปภาพแสดงผลเต็มพื้นที่ที่กำหนดไว้ สามารถเขียนโปรแกรมได้ดังนี้

ตัวอย่าง background-size: contain คือคำสั่งอะไร

<style>
    .image {
        background-image: url('background.jpg');
        width: 200px;
        height: 200px;
        background-size: contain;
    }
</style>

<div class="image"></div>

background-size: contain จากตัวอย่างแสดงรูปภาพ background.jpg ด้วยคำสั่ง background-image ขนาดพื้นที่การแสดงผล 200x200 จากนั้นกำหนด background-size ด้วย contain เพื่อให้รูปภาพดังกล่าวแสดงเต็มพื้นที่ดังกล่าว จากนั้นนำ class .image ไปแสดงผลที่ div ของ HTML