<div>
<img src="แนะนำที่อยู่รูปภาพ" alt="" class="Img">
</div>วิธีที่ 1: เพิ่ม object-fit:cover ให้กับองค์ประกอบ img
div{
ความกว้าง: 500px;
ความสูง: 500px;
-
.อิมเมจ{
ความกว้าง: 100%;
ความสูง: 100%;
วัตถุพอดี: ปก;
-วิธีที่ 2: จัดกึ่งกลางองค์ประกอบ img ในแนวตั้ง และตั้งค่าความกว้างและความสูงขั้นต่ำเป็นแบบเต็มหน้าจอ
div{
ความกว้าง: 500px;
ความสูง: 500px;
ตำแหน่ง:ญาติ;
ล้น: ซ่อน;
-
.อิมเมจ{
ตำแหน่ง: แน่นอน;
ด้านบน: 50%;
ซ้าย: 50%;
จอแสดงผล: บล็อก;
ความกว้างขั้นต่ำ: 100%;
ความสูงขั้นต่ำ: 100%;
แปลงร่าง:แปล(-50%,-50%);
-<div class="คอนเทนเนอร์"></div>
วิธีการ: เพิ่มขนาดพื้นหลัง: ครอบคลุมองค์ประกอบ div; ตั้งค่ารูปภาพให้ไม่ซ้ำไม่ซ้ำ
.คอนเทนเนอร์{
ความสูง: 500px;
ความกว้าง: 500px;
ระยะขอบ: 0px อัตโนมัติ;
พื้นหลัง: url('../Status/img/health.png') ไม่ทำซ้ำ;
ขนาดพื้นหลัง: ปก;
-นี่เป็นการสรุปบทความนี้เกี่ยวกับวิธีเติม div ด้วยรูปภาพ CSS สำหรับข้อมูลเพิ่มเติมเกี่ยวกับวิธีการเติม div ด้วยรูปภาพ CSS โปรดค้นหาบทความก่อนหน้าใน downcodes.com หรืออ่านบทความที่เกี่ยวข้องด้านล่างต่อไป ฉันหวังว่าคุณจะสนับสนุน ดาวน์โค้ดในอนาคต .com!