[html] 경계 상자에 맞게 이미지 크기 조정

Program / 글쓴이

이미지를 경계 상자로 크기를 조정하는 CSS 전용 솔루션이 있습니까 (종횡비 유지)? 이미지가 컨테이너보다 큰 경우 작동합니다.

img {
  max-width: 100%;
  max-height: 100%;
}

예:

하지만 크기가 컨테이너의 100 %가 될 때까지 이미지를 확대하고 싶습니다.

답변

참고 : 이것이 허용되는 답변이지만 아래 답변 이 더 정확하며 배경 이미지 사용 옵션이있는 경우 현재 모든 브라우저에서 지원됩니다.

아니요, 양방향으로이 작업을 수행하는 CSS 유일한 방법은 없습니다. 추가 할 수 있습니다

.fillwidth {
    min-width: 100%;
    height: auto;
}

요소가 항상 너비를 100 %로 유지하고 높이를 가로 세로 비율 또는 그 반대로 자동으로 조정하려면 :

.fillheight {
    min-height: 100%;
    width: auto;
}

항상 최대 높이 및 상대 너비로 조정합니다. 두 가지를 모두 수행하려면 가로 세로 비율이 컨테이너보다 높거나 낮은 지 확인해야하며 CSS는이를 수행 할 수 없습니다.

그 이유는 CSS가 페이지가 어떻게 생겼는지 알지 못하기 때문입니다. 사전에 규칙을 설정하지만 그 후에야 요소가 렌더링되고 처리중인 크기와 비율을 정확히 알 수 있습니다. 이를 감지하는 유일한 방법은 JavaScript를 사용하는 것입니다.

JS 솔루션을 찾고 있지는 않지만 누군가 필요할 경우 어쨌든 추가하겠습니다. JavaScript로이를 처리하는 가장 쉬운 방법은 비율의 차이에 따라 클래스를 추가하는 것입니다. 상자의 너비 대 높이 비율이 이미지의 비율보다 크면 “fillwidth”클래스를 추가하고 그렇지 않으면 “fillheight”클래스를 추가하십시오.

코드 스 니펫 표시

답변

CSS3 덕분에 해결책이 있습니다!

해결책은 이미지를로 background-image설정 한 다음로 설정하는 background-size것 contain입니다.

HTML

<div class='bounding-box'>
</div>

CSS

.bounding-box {
  background-image: url(...);
  background-repeat: no-repeat;
  background-size: contain;
}

여기에서 테스트하십시오. http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=contain

최신 브라우저와의 완벽한 호환성 : http://caniuse.com/background-img-opts

div를 중앙에 정렬하려면 다음 변형을 사용할 수 있습니다.

.bounding-box {
  background-image: url(...);
  background-size: contain;
  position: absolute;
  background-position: center;
  background-repeat: no-repeat;
  height: 100%;
  width: 100%;
}

답변

내가 발견 한 hackish 솔루션은 다음과 같습니다.

#image {
    max-width: 10%;
    max-height: 10%;
    transform: scale(10);
}

이렇게하면 이미지가 10 배로 확대되지만 최종 크기의 10 %로 제한되어 컨테이너에 바인딩됩니다.

background-image솔루션 과 달리 이는 <video>요소 에서도 작동 합니다.

대화 형 예 :

코드 스 니펫 표시

답변

오늘은 object-fit : contain이라고 말하세요. 지원은 IE를 제외한 모든 것입니다 : http://caniuse.com/#feat=object-fit

답변

html :

    <div class="container">
      <img class="flowerImg" src="flower.jpg">
    </div>

css : 

.container{
  width: 100px;
  height: 100px;
}


.flowerImg{
  width: 100px;
  height: 100px;
  object-fit: cover;
  /*object-fit: contain;
  object-fit: scale-down;
  object-position: -10% 0;
  object-fit: none;
  object-fit: fill;*/
}

답변

순수한 CSS와 완벽한 브라우저 지원을 통해이를 수행 할 수 있습니다. 세로로 긴 이미지와 가로로 긴 이미지 모두 동시에 가능합니다.

다음은 Chrome, Firefox 및 Safari에서 작동하는 스 니펫입니다 (사용 object-fit: scale-down및 사용하지 않음).

figure {
  margin: 0;
}

.container {
  display: table-cell;
  vertical-align: middle;
  width: 80px;
  height: 80px;
  border: 1px solid #aaa;
}

.container_image {
  display: block;
  max-width: 100%;
  max-height: 100%;
  margin-left: auto;
  margin-right: auto;
}

.container2_image2 {
  width: 80px;
  height: 80px;
  object-fit: scale-down;
  border: 1px solid #aaa;
}
Without `object-fit: scale-down`:

<br>
<br>

<figure class="container">
  <img class="container_image" src="https://i.imgur.com/EQgexUd.jpg">
</figure>

<br>

<figure class="container">
  <img class="container_image" src="https://i.imgur.com/ptO8pGi.jpg">
</figure>

<br> Using `object-fit: scale-down`:

<br>
<br>

<figure>
  <img class="container2_image2" src="https://i.imgur.com/EQgexUd.jpg">
</figure>

<br>

<figure>
  <img class="container2_image2" src="https://i.imgur.com/ptO8pGi.jpg">
</figure>

스 니펫 확장

답변

배경 이미지가없고 컨테이너가 필요없는 또 다른 솔루션 (경계 상자의 최대 크기를 알아야 함) :

img{
  max-height: 100px;
  max-width: 100px;
  width: auto;    /* These two are added only for clarity, */
  height: auto;   /* as the default is auto anyway */
}

컨테이너를 사용해야하는 경우 max-width 및 max-height를 100 %로 설정할 수 있습니다.

img {
    max-height: 100%;
    max-width: 100%;
    width: auto; /* These two are added only for clarity, */
    height: auto; /* as the default is auto anyway */
}

div.container {
    width: 100px;
    height: 100px;
}

이를 위해 다음과 같은 것이 있습니다.

<table>
    <tr>
        <td>Lorem</td>
        <td>Ipsum<br />dolor</td>
        <td>
            <div class="container"><img src="image5.png" /></div>
        </td>
    </tr>
</table>