div 안에 이미지 (img)를 맞추고 종횡비를 유지하려면 어떻게합니까?

div 안에 이미지 (img)를 맞추고 종횡비를 유지하려면 어떻게합니까?

---

48x48 div가 있고 그 안에 img 요소가 있습니다. 비율이 유지되는 동안 html과 CSS를 사용하여 달성 할 수 있습니까?

---

CSS를 작성할 때 이미지의 크기를 모르는 경우 자르기를 방지하기 위해 JavaScript가 필요합니다.

HTML 및 JavaScript

<div id="container">
    <img src="something.jpg" alt="" />
</div>

<script type="text/javascript">
(function() {

var img = document.getElementById('container').firstChild;
img.onload = function() {
    if(img.height > img.width) {
        img.height = '100%';
        img.width = 'auto';
    }
};

}());
</script>

CSS

#container {
   width: 48px;
   height: 48px;
}

#container img {
   width: 100%;
}

JavaScript 라이브러리를 사용하는 경우이를 활용할 수 있습니다.

---

max-height:100%; max-width:100%;div 내부의 이미지에 사용하십시오 .

---

불행히도 max-width + max-height는 내 작업을 완전히 다루지 못합니다 ... 그래서 다른 해결책을 찾았습니다.

크기 조절 중에 이미지 비율을 저장하기 위해object-fit CSS3 속성을 사용할 수도 있습니다 .

유용한 기사 : CSS3로 이미지 종횡비 제어

img {
    width: 100%; /* or any custom size */
    height: 100%; 
    object-fit: contain;
}

나쁜 소식 : IE는 지원되지 않음 ( 사용 가능 )

---

CSS 만 사용 :

div > img {
  width: auto;
  height : auto;
  max-height: 100%;
  max-width: 100%;
}

---

HTML

<div>
    <img src="something.jpg" alt="" />
</div>

CSS

div {
   width: 48px;
   height: 48px;
}

div img {
   display: block;
   width: 100%;
}

이렇게하면 이미지가 확장되어 부모를 채우고 divCSS 에서 크기가 설정됩니다 .

---

이 작업을 수행하는 데 많은 문제가 있었고, 찾은 모든 단일 솔루션이 작동하지 않는 것 같습니다.

div 디스플레이를 flex로 설정해야한다는 것을 깨달았으므로 기본적으로 이것이 CSS입니다.

div{
display: flex;
}

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

---

CSS를 사용해보십시오 :

img {
  object-fit: cover;
  height: 48px;
}

---

나를 위해 다음 CSS가 작동했습니다 (Chrome, Firefox 및 Safari에서 테스트 됨).

함께 작동하는 여러 가지가 있습니다.

• max-height: 100%;, max-width: 100%;및 height: auto;, width: auto;종횡비를 유지하면서 제 100 %에 도달 치수 중하도록 IMG 스케일을
• position: relative;용기와 position: absolute;어린이 의 용기 안에있는 img의 왼쪽 위 모서리 top: 50%;와 함께left: 50%;
• transform: translate(-50%, -50%); moves the img back to the left and top by half its size, thus centering the img in the container

CSS:

.container {
    height: 48px;
    width: 48px;

    position: relative;
}

.container > img {
    max-height: 100%;
    max-width: 100%;
    height: auto;
    width: auto;

    position: absolute;
    top: 50%;
    left: 50%;

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

---

Setting the photo as a background image will give us more control over size and placement, leaving the img tag to serve a different purpose...

Below, if we want the div to be the same aspect ratio as the photo, then placeholder.png is a small transparent image with the same aspect ratio as photo.jpg. If the photo is a square, it's a 1px x 1px placeholder, if the photo is a video thumbnail, it's a 16x9 placeholder, etc.

Specific to the question, use a 1x1 placeholder to maintain the div's square ratio, with a background image using background-size to maintain the photo's aspect ratio.

I used background-position: center center; so the photo will be centered in the div. (Aligning the photo in the vertical center or bottom would get ugly with the photo in the img tag.)

div {
    background: url(photo.jpg) center center no-repeat;
    background-size: contain;
    width: 48px; // or a % in responsive layout
}
img {
    width: 100%;
}

<div><img src="placeholder.png"/></div>

To avoid an extra http request, convert the placeholder image to a data: URL.

<img src="data:image/png;base64,..."/>

---

you can use class "img-fluid" for newer version i.e Bootstrap v4.

and can use class "img-responsive" for older version like Bootstrap v3.

Usage:-

img tag with :-

class="img-fluid"

src="..."

---

Here's an all JavaScript approach. It scales an image incrementally down until it fits correctly. You choose how much to shrink it each time it fails. This example shrinks it 10% each time it fails:

let fit = function (el, w, h, percentage, step)
{
    let newH = h;
    let newW = w;

    // fail safe
    if (percentage < 0 || step < 0) return { h: h, w: w };
    if (h > w)
    {
        newH = el.height() * percentage;
        newW = (w / h) * newH;
        if (newW > el.width())
        {
            return fit(el, w, h, percentage - step, step);
        }
    }
    else
    {
        newW = el.width() * percentage;
        newH = (h / w) * newW;
        if (newH > el.height())
        {
            return fit(el, w, h, percentage - step, step);
        }
    }

    return { h: newH, w: newW };
};

img.bind('load', function ()
{
    let h = img.height();
    let w = img.width();
    let newFit = fit($('<img-wrapper-selector>'), w, h, 1, 0.1);

    img.width(newFit.w);
    img.height(newFit.h);
});

Feel free to copy and paste directly.

참고URL : https://stackoverflow.com/questions/4394309/how-do-i-fit-an-image-img-inside-a-div-and-keep-the-aspect-ratio