วิธีรักษาอัตราส่วนโดยใช้แท็ก HTML IMG

ฉันใช้แท็ก img ของ HTML เพื่อแสดงรูปภาพในแอปพลิเคชันของเรา ฉันได้ตั้งค่าแอตทริบิวต์ความสูงและความกว้างเป็น 64 ฉันต้องการแสดงความละเอียดของภาพใด ๆ (เช่น 256x256, 1024x768, 500x400, 205x246 เป็นต้น) เป็น 64x64 แต่การตั้งค่าแอตทริบิวต์ความสูงและความกว้างของแท็ก img เป็น 64 จะไม่คงอัตราส่วนภาพไว้ดังนั้นภาพจึงดูบิดเบี้ยว

สำหรับการอ้างอิงของคุณรหัสที่แน่นอนของฉันคือ:

<img src="Runtime Path to photo" border="1" height="64" width="64">

อย่ากำหนดความสูงและความกว้าง ใช้อย่างใดอย่างหนึ่งและอัตราส่วนภาพที่ถูกต้องจะยังคงอยู่

.widthSet {
    max-width: 64px;
}

.heightSet {
    max-height: 64px;
}

<img src="http://placehold.it/200x250" />

<img src="http://placehold.it/200x250" width="64" />

<img src="http://placehold.it/200x250" height="64" />

<img src="http://placehold.it/200x250" class="widthSet" />

<img src="http://placehold.it/200x250" class="heightSet" />

นี่คือตัวอย่าง

div{
   width: 200px;
   height:200px;
   border:solid
 }

img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    }

<div>
  <img src="https://upload.wikimedia.org/wikipedia/meta/0/08/Wikipedia-logo-v2_1x.png">
</div>

ตั้งค่าwidthและheightของรูปภาพเป็นautoแต่ จำกัด ทั้งสองอย่างmax-widthและmax-height:

img {
    max-width:64px;
    max-height:64px;
    width:auto;
    height:auto;
}

ซอ

หากคุณต้องการแสดงภาพที่มีขนาดตามอำเภอใจใน "เฟรม" 64x64px คุณสามารถใช้กระดาษห่อแบบอินไลน์และการวางตำแหน่งสำหรับภาพเหล่านั้นได้เช่นในซอนี้

<img src="Runtime Path to photo"
     style="border: 1px solid #000; max-width:64px; max-height:64px;">

ไม่มีวิธีการใดที่ระบุไว้ในการปรับขนาดภาพให้มีขนาดใหญ่ที่สุดเท่าที่จะเป็นไปได้ที่พอดีกับกล่องในขณะที่ยังคงอัตราส่วนภาพที่ต้องการไว้

สิ่งนี้ไม่สามารถทำได้ด้วยแท็ก IMG (อย่างน้อยก็ไม่ใช่ถ้าไม่มี JavaScript สักหน่อย) แต่สามารถทำได้ดังนี้:

 <div style="background:center no-repeat url(...);background-size:contain;width:...;height:..."></div>

ใช้object-fit: containแอตทริบิวต์ในใน CSS ของ imgHTML

ห่อรูปภาพdivด้วยขนาด 64x64 และตั้งค่าwidth: inheritเป็นรูปภาพ:

<div style="width: 64px; height: 64px;">
    <img src="Runtime path" style="width: inherit" />
</div>

ทำไมคุณไม่ใช้ไฟล์ CSS แยกกันเพื่อรักษาความสูงและความกว้างของรูปภาพที่คุณต้องการแสดง ด้วยวิธีนี้คุณสามารถระบุความกว้างและความสูงได้ตามต้องการ

เช่น:

       image {
       width: 64px;
       height: 64px;
       }

ลองสิ่งนี้:

<img src="Runtime Path to photo" border="1" height="64" width="64" object-fit="cover">

การเพิ่ม object-fit = "cover" จะบังคับให้รูปภาพกินเนื้อที่โดยไม่เสียอัตราส่วน