CSS กำหนดขนาดรูป ด้วยกว้าง (width) และสูง (height)

สอนเขียนโค้ดภาษา CSS กำหนดขนาดรูป ด้วยการใช้คำสั่ง width และ height คือ การกำหนดค่าความกว้าง และความสูงของรูปภาพที่ต้องการ โดยตัวอย่างจะแนะนำแบบเขียน CSS แยก และแบบเขียนในแท็ก HTML สามารถเขียนโปรแกรมได้ดังนี้

ตัวอย่างที่ 1 CSS กำหนดขนาดรูป ด้วยกว้าง (width) และสูง (height) ด้วย CSS แยก

<style>
    .image_resize {
        width: 100px;
        height: 100px;
    }
</style>

<img src="https://www.devdit.com/image.jpg" class="image_resize">

โค้ดด้านบนกำหนดขนาดรูป เป็นกว้าง (width) 100px และ สูง (height) 100px กำหนดไว้ใน class .image_resize จากนั้นนำมาใช้งานใน attribute class ของแท็ก img

ตัวอย่างที่ 2 CSS กำหนดขนาดรูป ด้วยกว้าง (width) และสูง (height) ด้วยการแทรกใน HTML

<img src="https://www.devdit.com/image.jpg" width="100px" height="100px">

โค้ดด้านบนกำหนดขนาดรูป เป็นกว้าง (width) 100px และ สูง (height) 100px กำหนดไว้ใน attribute width และ height ของแท็ก img