HTML IMG 태그를 사용하여 종횡비를 유지하는 방법

응용 프로그램에서 사진을 표시하기 위해 HTML의 img 태그를 사용하고 있습니다. 높이 및 너비 속성을 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: containhtml의 CSS에서 속성을 사용하십시오 img.

div64x64 크기 의 이미지를 감싸고 이미지로 설정 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"를 추가하면 이미지가 가로 세로 비율을 잃지 않고 공간을 차지하게됩니다.