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

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

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

예:

• 사용 사례 1 (작동) : http://jsfiddle.net/Jp5AQ/2/
• 사용 사례 2 (작동) : http://jsfiddle.net/Jp5AQ/3/

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

• 사용 사례 3 (작동하지 않음) : http://jsfiddle.net/Jp5AQ/4/

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

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

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

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

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

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

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

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

$('div').each(function() {
  var fillClass = ($(this).height() > $(this).width()) 
    ? 'fillheight'
    : 'fillwidth';
  $(this).find('img').addClass(fillClass);
});

.fillwidth { 
  width: 100%; 
  height: auto; 
}
.fillheight { 
  height: 100%; 
  width: auto; 
}

div {
  border: 1px solid black;
  overflow: hidden;
}

.tower {
  width: 100px;
  height: 200px;
}

.trailer {
  width: 200px;
  height: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tower">
  <img src="http://placekitten.com/150/150" />
</div>
<div class="trailer">
  <img src="http://placekitten.com/150/150" />
</div>

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>요소 에서도 작동 합니다.

대화 형 예 :

 function step(timestamp) {
     var container = document.getElementById('container');
     timestamp /= 1000;
     container.style.left   = (200 + 100 * Math.sin(timestamp * 1.0)) + 'px';
     container.style.top    = (200 + 100 * Math.sin(timestamp * 1.1)) + 'px';
     container.style.width  = (500 + 500 * Math.sin(timestamp * 1.2)) + 'px';
     container.style.height = (500 + 500 * Math.sin(timestamp * 1.3)) + 'px';
     window.requestAnimationFrame(step);
 }

 window.requestAnimationFrame(step);

 #container {
     outline: 1px solid black;
     position: relative;
     background-color: red;
 }
 #image {
     display: block;
     max-width: 10%;
     max-height: 10%;
     transform-origin: 0 0;
     transform: scale(10);
 }

<div id="container">
    <img id="image" src="https://upload.wikimedia.org/wikipedia/en/7/7d/Lenna_%28test_image%29.png">
</div>

오늘은 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 */
}

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>

이 예제는 전체 창에 맞게 이미지를 비례 적으로 늘립니다. 위의 올바른 코드를 즉석에서 추가하는 것은$( window ).resize(function(){});

function stretchImg(){
    $('div').each(function() {
      ($(this).height() > $(this).find('img').height()) 
        ? $(this).find('img').removeClass('fillwidth').addClass('fillheight')
        : '';
      ($(this).width() > $(this).find('img').width()) 
        ? $(this).find('img').removeClass('fillheight').addClass('fillwidth')
        : '';
    });
}
stretchImg();

$( window ).resize(function() {
    strechImg();
});

두 가지 if 조건이 있습니다. 첫 번째는 이미지 높이가 div보다 작은 지 계속 확인하고 .fillheight클래스를 적용 하고 다음은 너비를 확인하고 .fillwidth클래스를 적용 합니다. 두 경우 모두 다른 클래스는.removeClass()

다음은 CSS입니다.

.fillwidth { 
   width: 100%;
   max-width: none;
   height: auto; 
}
.fillheight { 
   height: 100vh;
   max-width: none;
   width: auto; 
}

당신은 대체 할 수 있습니다 100vh에 의해 100%당신이 사업부에서와 이미지를 스트레칭합니다. 이 예제는 전체 창에 맞게 이미지를 비례 적으로 늘립니다.

상향이 아니라 하향이 아닌 규모를 찾고 계십니까?

div {
    border: solid 1px green;
    width: 60px;
    height: 70px;
}

div img {
    width: 100%;
    height: 100%;
    min-height: 500px;
    min-width: 500px;
    outline: solid 1px red;
}

그러나 이것은 종횡비를 잠그지 않습니다.

나는 상자 안에 이미지를 중앙에 테이블을 사용했습니다. 가로 세로 비율을 유지하고 완전히 상자 안에있는 방식으로 이미지 크기를 조정합니다. 이미지가 상자보다 작 으면 중앙에있는 것처럼 표시됩니다. 아래 코드는 40px 너비와 40px 높이 상자를 사용합니다. (더 복잡한 다른 코드에서 제거하고 약간 단순화했기 때문에 얼마나 잘 작동하는지 확실하지 않습니다)

CSS :

.SmallThumbnailContainer
{
    display: inline-block; position: relative;
    float: left;    
    width: 40px;
    height: 40px;
    border: 1px solid #ccc;
    margin: 0px; padding: 0px;
}
.SmallThumbnailContainer { width: 40px; margin: 0px 10px 0px 0px; } 
.SmallThumbnailContainer tr { height: 40px; text-align: center; }
.SmallThumbnailContainer tr td { vertical-align: middle; position: relative; width: 40px;  }
.SmallThumbnailContainer tr td img { overflow: hidden; max-height: 40px; max-width: 40px; vertical-align: middle; margin: -1px -1px 1px -1px; }

HTML :

<table class="SmallThumbnailContainer" cellpadding="0" cellspacing="0">
    <tr><td>
        <img src="thumbnail.jpg" alt="alternative text"/>
    </td></tr>
    </table>

이를 수행하는 가장 깨끗하고 간단한 방법 :

먼저 CSS :

div.image-wrapper {
    height: 230px; /* Suggestive number; pick your own height as desired */
    position: relative;
    overflow: hidden; /* This will do the magic */
    width: 300px; /* Pick an appropriate width as desired, unless you already use a grid, in that case use 100% */
}
img {
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    height: auto;
}

HTML :

<div class="image-wrapper">
  <img src="yourSource.jpg">
</div>

이것은 트릭을 할 것입니다!

이것은 나를 도왔습니다.

.img-class {
  width: <img width>;
  height: <img height>;
  content: url('/path/to/img.png');
}

그런 다음 요소에서 (자바 스크립트 또는 미디어 쿼리를 사용하여 응답 성을 추가 할 수 있음) :

<div class='img-class' style='transform: scale(X);'></div>

도움이 되었기를 바랍니다!

.boundingbox {
    width: 400px;
    height: 500px;
    border: 2px solid #F63;
}
img{
    width:400px;
    max-height: 500px;
    height:auto;
}

나는 반대표를 받았기 때문에 내 솔루션을 더 설명하기 위해 내 대답을 편집하고 있습니다.

CSS에서 위와 같이 스타일을 설정하면 이제 다음 html div가 이미지가 항상 너비에 맞게 표시되고 가로 세로 비율을 너비에 맞게 조정합니다. 따라서 이미지는 질문에서 묻는 경계 상자에 맞게 크기 가 조정됩니다 .

<div class="boundingbox"><img src="image.jpg"/></div>