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

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 is set to the relative position. This means all the child elements will get the starting coordinates (origins) from where this DIV starts.

The image is set as a BLOCK element, min-width/height both set to 100% means to resize the image no matter of its size to be the minimum of 100% of it's parent. min is the key. If by min-height, the image height exceeded the parent's height, no problem. It will look for if min-width and try to set the minimum height to be 100% of parents. Both goes vice-versa. This ensures there are no gaps around the div but image is always bit bigger and gets trimmed by overflow:hidden;

Now image, this is set to an absolute position with left:50% and top:50%. Means push the image 50% from the top and left making sure the origin is taken from DIV. Left/Top units are measured from the parent.

Magic moment:

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

Now, this translate function of CSS3 transform property moves/repositions an element in question. This property deals with the applied element hence the values (x, y) OR (-50%, -50%) means to move the image negative left by 50% of image size and move to the negative top by 50% of image size.

Eg. if Image size was 200px × 150px, transform:translate(-50%, -50%) will calculated to translate(-100px, -75px). % unit helps when we have various size of image.

This is just a tricky way to figure out centroid of the image and the parent DIV and match them.

Apologies for taking too long to explain!

Resources to read more:

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

---

Change your code:

a.image_container img {
    width: 100%;
}

To this:

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/

---

Use max-width property of CSS, like this :

img{
  max-width:100%;
}

---

If you take answer's Shekhar K. Sharma, and it almost work, you need also add to your this height: 1px; or this width: 1px; for must work.

참고URL : https://stackoverflow.com/questions/19192892/css-how-can-i-set-image-size-relative-to-parent-height