โดยการระบุช่องว่างภายในขององค์ประกอบเป็นเปอร์เซ็นต์ เราสามารถรักษาอัตราส่วนขององค์ประกอบได้
สำหรับสิ่งนี้ ให้ใช้คุณสมบัติการเติม CSS -
-
ช่องว่างภายใน ระบุช่องว่างภายในด้านล่างขององค์ประกอบ
-
แผ่นรองเสริม ระบุการเติมด้านบนขององค์ประกอบ
-
padding-left ระบุช่องว่างภายในด้านซ้ายขององค์ประกอบ
-
ช่องว่างภายใน-ขวา ระบุช่องว่างภายในที่ถูกต้องขององค์ประกอบ
-
ช่องว่างภายใน ทำหน้าที่เป็นชวเลขสำหรับคุณสมบัติก่อนหน้านี้
ตัวอย่าง
ตัวอย่างต่อไปนี้แสดงคุณสมบัติการเติม CSS เพื่อรักษาอัตราส่วนภาพ
<!DOCTYPE html>
<html>
<head>
<style>
#demo {
padding-top: 100%;
box-shadow: 0 0 24px steelblue;
position: relative;
width: 100%;
}
div > div {
margin: 10px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
text-align: center;
}
</style>
</head>
<body>
<p>Watch the below div</p>
<div id="demo">
<div>Fun Ratio!</div>
</div>
</body>
</html> ผลลัพธ์
สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -
แม้จะปรับขนาดหน้าต่างแล้ว อัตราส่วนภาพก็ยังอยู่ที่ 1:1
ตัวอย่าง
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: 10%;
padding-top: 56.25%;
height: 0px;
position: relative;
box-shadow: 0 0 0 20px antiquewhite;
}
iframe {
position: absolute;
top: 0;
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div>
<iframe src="https://www.youtube.com/embed/0cwk9UMLnWE" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-inpicture" allowfullscreen></iframe>
</div>
</body>
</html> ผลลัพธ์
สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -
