HTML IMG 태그를 이용한 종횡비 유지 방법

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="https://placeimg.com/200/500/any/grayscale" />

<img src="https://placeimg.com/200/500/any/grayscale" width="64" />

<img src="https://placeimg.com/200/500/any/grayscale" height="64" />

<img src="https://placeimg.com/200/500/any/grayscale" class="widthSet" />

<img src="https://placeimg.com/200/500/any/grayscale" class="heightSet" />

유연성을 높이는 또 다른 옵션은 를 사용하는 것입니다.이를 통해 고정 치수를 설정할 수 있습니다.img이미지 자체는 정의된 영역 내에서 다양한 방식으로 표시될 수 있습니다.

img {
    width: 128px;
    height: 128px;
    border: 1px solid hotpink;
}

.none {
  /* Image is not scaled */ 
  object-fit: none;
}

.fill {
  /* Image is scaled to fill the container. */
  /* Aspect ratio IS NOT maintained */
  object-fit: fill;
}

.cover {
  /* Image is scaled to fill the container. */
  /* Aspect ratio IS maintained */
  object-fit: cover;
}

.contain {
  /* Image is scaled to fit within the container. */
  /* Aspect ratio IS maintained */
  object-fit: contain;
}

.scale-down {
  /* Uses either 'none' or 'contain' to produce the smallest image size */
  object-fit: scale-down;
}

<img src="https://picsum.photos/seed/stackoverflow/200/300" class="none" />

<img src="https://picsum.photos/seed/stackoverflow/200/300" class="fill" />

<img src="https://picsum.photos/seed/stackoverflow/200/300" class="cover" />

<img src="https://picsum.photos/seed/stackoverflow/200/300" class="contain" />

<img src="https://picsum.photos/seed/stackoverflow/200/300" class="scale-down" />

여기 샘플이 있습니다.

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그리고.heighto에 저장할 수 있습니다.auto 다 요, 합니다.max-width그리고.max-height:

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

피들

64x64px "프레임"에서 임의 크기의 이미지를 표시하려면 이 Fiddle에서와 같이 인라인 블록 포장지와 위치 지정을 사용할 수 있습니다.

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

사용하다object-fit: contain에서 html의 cs.img.

ex:

img {
    ...
    object-fit: contain
    ...
}

CSS 가 aspect-ratio 크기 및 에 대한 선호 자동 크기 및 기타 레이아웃 함수 계산에 사용될 상자에 대한 선호 가로 세로 비율을 설정합니다.

img {
  width: 100%;
  aspect-ratio: 16/9;
}

잘 퍼져있는 모든 브라우저에서 지원됩니다.
MDN 링크 : https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio
그리고 https://web.dev/aspect-ratio/에는 이 속성을 사용하는 좋은 예가 포함되어 있습니다.

나열된 방법 중 원하는 가로 세로 비율을 유지하면서 상자에 맞는 가장 큰 크기로 영상을 축척하는 방법이 없습니다.

이것은 IMG 태그로는 할 수 없지만(적어도 자바스크립트가 조금 없는 것은 아닙니다), 다음과 같이 할 수 있습니다.

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

를 로.div 및 수 64x64hwidth: inherit지:

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

시도해 보기:

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

object-fit="cover"를 추가하면 가로 세로 비율을 잃지 않고 이미지가 공간을 차지하게 됩니다.

가로 세로 비율을 설정할 수 있습니다.

img {
  width: 64px;
  aspect-ratio: 1/1;
}

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

표시하고 싶은 이미지의 높이와 너비를 유지하기 위해 별도의 CSS 파일을 사용하는 것은 어떨까요?이렇게 하면 반드시 폭과 높이를 제공할 수 있습니다.

예:

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

내 사이트는 여러 사진(다양한 가로 세로 비율)을 표시하고 하나를 클릭하면 모드로 열립니다.잘라내기, 스크롤, 왜곡 없이 모달에 맞도록 하기 위해 img 태그에 다음 클래스를 사용했습니다.

.img {
  max-height: 100%;
  max-width: 100%;
  object-fit: scale-down;
}

일정한 가로 세로 비율을 가지려면 이미지를 래핑하는 디브가 필요합니다.

패딩-바텀 트릭을 사용하여 div가 가로 세로 비율과 절대 위치 이미지를 강제로 준수하여 공백을 채울 수 있습니다.

또한 이미지가 반응성이 좋아 사용 가능한 모든 수평 공간을 확보할 수 있습니다.

.img-frame{
  width: 100%;
  padding-bottom: 100%;
  background: gray;
  overflow: hidden;
  position: relative;
}

.img-frame-4by3{
  padding-bottom: 75%;
}

.img-frame-16by9{
  padding-bottom: 56.25%;
}


.img-frame-5by1{
  padding-bottom: 20%;
}


.img-frame img{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

<div style="max-width:100px; margin: 1rem auto;">
  
  <p>4:3</p>
  <div class="img-frame img-frame-4by3">
    <img src="http://placekitten.com/g/400/400" />
  </div>
  
  <br />
  
  <p>16:9</p>
  <div class="img-frame img-frame-16by9">
    <img src="http://placekitten.com/g/400/400" />
  </div>
  
  <br />
  
  <p>5:1</p>
  <div class="img-frame img-frame-5by1">
    <img src="http://placekitten.com/g/400/400" />
  </div>
  
</div>

CSS 사용 시:

.img {
    display:table-cell;
    max-width:...px;
    max-height:...px;
    width:100%;
}

포스터는 그가 >>(256x256, 1024x768, 500x400, 205x246 등)에 게시한 대부분의 경우 높이에 따라 제한된 치수를 보여주지만 대부분의 풍경 "사진"에서 전형적으로 64px 최대 높이 픽셀 치수에 적합합니다.그래서 제 생각에 그는 항상 64픽셀 높이의 이미지를 원하는 것 같습니다.이 작업을 수행하려면 다음을 수행합니다.

<img id="photo1" style="height:64px;width:auto;" src="photo.jpg" height="64" />

이 솔루션은 이미지의 높이를 최대 64픽셀로 보장하며 각 이미지의 가로 세로 비율에 따라 너비를 늘리거나 줄일 수 있습니다.img에서 높이를 64로 설정heightattribute는 이미지가 다운로드될 때 브라우저의 Rendertree 레이아웃에 공간을 예약하므로 이미지가 다운로드될 때까지 콘텐츠가 이동하지 않습니다.또한 새로운 HTML5 표준이 항상 너비와 높이 속성을 존중하는 것은 아닙니다.이미지의 최종 치수가 아닌 치수 "힌트"일 뿐입니다.스타일 시트에서 이미지 높이와 너비를 재설정하거나 변경하는 경우 이미지 속성의 실제 값이 CSS 값 또는 이미지 고유 기본 치수로 재설정됩니다.CSS 설정height"64 px"와.width"자동"으로 너비를 기본 이미지 너비(이미지 속성 너비가 아님)로 시작한 다음 높이에 대한 CSS 스타일을 사용하여 새 가로 세로 비율을 계산합니다.새로운 폭을 얻을 수 있습니다.따라서 높이와 너비 "img" 속성은 여기서 필요하지 않고 브라우저가 추가 계산을 수행하도록 강요합니다.

가장 좋은 방법은 img 태그에 고정된 "폭" 및 "높이" 속성을 사용하는 것입니다. 왜냐하면 브라우저는 로딩 기간 동안 레이아웃 깜박임을 방지하기 위해 이미지를 로딩하기 전에 이미지를 위해 예약해야 할 위치를 알아야 하기 때문입니다.CSS에서 이 중 하나를 "자동"으로 재정의하면 됩니다.

img {
  height: auto;
}

<img src="/sample.jpg" width="200" height="166">

언급URL : https://stackoverflow.com/questions/12912048/how-to-maintain-aspect-ratio-using-html-img-tag