CSS : 부모 높이에 상대적인 이미지 크기를 어떻게 설정할 수 있습니까?

너비와 높이의 비율을 유지하도록 이미지의 크기를 조정하는 방법을 알아 내려고하지만 이미지의 높이가 포함 된 div의 높이와 일치 할 때까지 크기가 조정됩니다. 꽤 크고 긴 이미지 (스크린 샷)를 가지고 있으며 이미지를 수동으로 크기를 조정하지 않고 표시를 위해 너비 200px, 높이 180px div에 넣고 싶습니다. 이를보기 좋게 만들려면 이미지의 측면이 오버플로되고 포함하는 div로 숨겨져 야합니다. 이것이 내가 지금까지 가지고있는 것입니다.

http://jsfiddle.net/f9krj/2/

HTML

<a class="image_container" href="http://www.skintype.ca/assets/background-x_large.jpg">
    <img src="http://www.skintype.ca/assets/background-x_large.jpg" alt="" />
</a>

CSS

a.image_container {
    background-color: #999;
    width: 200px;
    height: 180px;
    display: inline-block;
    overflow: hidden;
}
a.image_container img {
    width: 100%;
}

보시다시피 이미지 상위 컨테이너에 회색이 표시되어 전혀 표시되지 않아야합니다. 그 용기가 완전히 채워지려면 너비가 양쪽에서 똑같이 넘쳐 야합니다. 이것이 가능한가? 너무 긴 이미지도 고려할 수 있습니까?

원래 답변 :

CSS3를 선택할 준비가 되었으면 css3 translate 속성을 사용할 수 있습니다. 더 큰 것을 기준으로 크기를 조정하십시오. 높이가 크고 너비가 컨테이너보다 작 으면 너비가 100 %로 늘어나고 높이가 양쪽에서 잘립니다. 더 큰 너비도 마찬가지입니다.

당신의 필요, HTML :

<div class="img-wrap">
  <img src="http://lorempixel.com/300/160/nature/" />
</div>
<div class="img-wrap">
  <img src="http://lorempixel.com/300/200/nature/" />
</div>
<div class="img-wrap">
  <img src="http://lorempixel.com/200/300/nature/" />
</div>

그리고 CSS :

.img-wrap {
  width: 200px;
  height: 150px;
  position: relative;
  display: inline-block;
  overflow: hidden;
  margin: 0;
}

div > img {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  min-height: 100%;
  min-width: 100%;
  transform: translate(-50%, -50%);
}

짜잔! 근무 : http://jsfiddle.net/shekhardesigner/aYrhG/

설명

DIV가 relative위치 로 설정됩니다 . 이는 모든 자식 요소가이 DIV가 시작되는 시작 좌표 (원점)를 가져옴을 의미합니다.

이미지는 BLOCK 요소로 설정되며, min-width/height둘 다 100 %로 설정되면 크기에 관계없이 이미지의 크기가 부모의 최소 100 %가되도록 크기를 조정하는 것을 의미합니다. min열쇠입니다. min-height로 이미지 높이가 부모의 높이를 초과하면 문제 없습니다. 최소 너비인지 확인하고 최소 높이를 부모의 100 %로 설정하려고합니다. 둘 다 그 반대입니다. 이렇게하면 div 주변에 간격이 없지만 이미지는 항상 약간 더 크고overflow:hidden;

이제이 위치는 및로 image설정됩니다 . DIV에서 원점을 가져 오도록 이미지를 위쪽과 왼쪽에서 50 % 밀어 넣는 것을 의미합니다. 왼쪽 / 상단 단위는 상위 단위에서 측정됩니다.absoluteleft:50%top:50%

마법의 순간 :

transform: translate(-50%, -50%);

이제 translateCSS3 transform속성 의이 기능은 문제의 요소를 이동 / 위치 변경합니다. 이 속성은 적용된 요소를 처리하므로 값 (x, y) 또는 (-50 %, -50 %)는 이미지 크기의 50 %만큼 음수를 왼쪽으로 이동하고 이미지 크기의 50 %만큼 음수 상단으로 이동 함을 의미합니다. .

예 : 이미지 크기가 200px × 150px이면 transform:translate(-50%, -50%)translate (-100px, -75px)로 계산됩니다. % 단위는 다양한 이미지 크기를 가질 때 도움이됩니다.

이것은 이미지와 부모 DIV의 중심을 파악하고 일치시키는 까다로운 방법입니다.

설명하는 데 시간이 너무 오래 걸린 것에 대해 사과드립니다!

더 많은 것을 읽을 수있는 리소스 :

• https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translate
• https://css-tricks.com/centering-css-complete-guide/

코드 변경 :

a.image_container img {
    width: 100%;
}

이에:

a.image_container img {
    width: auto; // to maintain aspect ratio. You can use 100% if you don't care about that
    height: 100%;
}

http://jsfiddle.net/f9krj/5/

다음 max-width과 같이 CSS의 속성을 사용하십시오 .

img{
  max-width:100%;
}

Shekhar K. Sharma 의 답변 을 받아 거의 효과가 있다면 이것 height: 1px;또는 이것 width: 1px;에 추가 해야합니다.

당신은 그것을 위해 플렉스 상자를 사용할 수 있습니다 .. 이것은 당신의 문제를 해결할 것입니다

.image-parent 
{
     height:33px; 
     display:flex; 
}