Cách duy trì tỷ lệ khung hình bằng thẻ HTML IMG

Tôi đang sử dụng thẻ img của HTML để hiển thị ảnh trong ứng dụng của chúng tôi. Tôi đã đặt cả thuộc tính chiều cao và chiều rộng của nó thành 64. Tôi cần hiển thị bất kỳ độ phân giải hình ảnh nào (ví dụ: 256x256, 1024x768, 500x400, 205x246, v.v.) là 64x64. Nhưng bằng cách đặt các thuộc tính chiều cao và chiều rộng của thẻ img thành 64, nó không duy trì tỷ lệ khung hình, do đó hình ảnh trông bị méo.

Để bạn tham khảo mã chính xác của tôi là:

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

Không đặt chiều cao VÀ chiều rộng. Sử dụng cái này hay cái kia và tỷ lệ khung hình chính xác sẽ được duy trì.

.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" />

đây là mẫu

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>

Đặt widthvà heightcủa hình ảnh thành auto, nhưng giới hạn cả hai max-widthvà max-height:

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

Vĩ cầm

Nếu bạn muốn hiển thị hình ảnh có kích thước tùy ý trong "khung" 64x64px, bạn có thể sử dụng trình bao bọc khối nội tuyến và định vị cho chúng, như trong câu đố này .

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

Không có phương pháp nào được liệt kê chia tỷ lệ hình ảnh thành kích thước lớn nhất có thể vừa với một hộp trong khi vẫn giữ tỷ lệ khung hình mong muốn.

Điều này không thể được thực hiện với thẻ IMG (ít nhất là không có một chút JavaScript), nhưng nó có thể được thực hiện như sau:

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

Sử dụng object-fit: containthuộc tính trong css của html img.

Bọc hình ảnh theo divkích thước 64x64 và đặt thành width: inherithình ảnh:

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

Tại sao bạn không sử dụng một tệp CSS riêng để duy trì chiều cao và chiều rộng của hình ảnh bạn muốn hiển thị? Bằng cách đó, bạn có thể cung cấp chiều rộng và chiều cao nhất thiết.

ví dụ:

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

Thử cái này:

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

Thêm object-fit = "cover" sẽ buộc hình ảnh chiếm không gian mà không làm mất tỷ lệ khung hình.