HTML IMG 태그를 사용하여 종횡비를 유지하는 방법 및 너비 속성을 64로 설정했습니다. 이미지

응용 프로그램에서 사진을 표시하기 위해 HTML의 img 태그를 사용하고 있습니다. 높이 및 너비 속성을 64로 설정했습니다. 이미지 해상도 (예 : 256×256, 1024×768, 500×400, 205×246 등)를 64×64로 표시해야합니다. 그러나 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.

답변

div64×64 크기 의 이미지를 감싸고 이미지로 설정 width: inherit하십시오. 

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