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%); img를 왼쪽과 위쪽으로 반으로 이동시켜 컨테이너의 img를 중앙에 위치시킵니다.

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%);
}

사진을 배경 이미지로 설정하면 크기와 배치를보다 세밀하게 제어 할 수 있으며 img 태그는 다른 용도로 사용됩니다 ...

아래에서 div를 사진과 동일한 종횡비로 만들려면 placeholder.png는 photo.jpg와 동일한 종횡비를 가진 작은 투명 이미지입니다. 사진이 정사각형이면 1px x 1px 자리 표시 자이고 사진이 비디오 썸네일이면 16x9 자리 표시 자 등입니다.

질문과 관련하여 1x1 자리 표시자를 사용하여 div의 제곱 비율 background-size을 유지하고 배경 이미지를 사용 하여 사진의 종횡비를 유지하십시오.

내가 사용하는 background-position: center center;사진이 사업부의 중앙 수 있도록. (가로 세로 가운데 또는 아래쪽에 사진을 정렬하면 img 태그에있는 사진이보기 흉하게 나타납니다.)

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>

추가 http 요청을 피하려면 자리 표시 자 이미지를 data : URL로 변환하십시오 .

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

최신 버전, 즉 Bootstrap v4에 "img-fluid" 클래스를 사용할 수 있습니다 .

Bootstrap v3 과 같은 이전 버전에는 "img-responsive" 클래스를 사용할 수 있습니다 .

사용법 :-

img 태그 :-

클래스 = "img-fluid"

src = "..."

다음은 모든 JavaScript 접근 방식입니다. 이미지가 올바르게 맞을 때까지 이미지 크기가 점차 작아집니다. 실패 할 때마다 축소 할 정도를 선택합니다. 이 예제는 실패 할 때마다 10 % 씩 축소합니다.

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);
});

자유롭게 복사하여 붙여 넣으십시오.

나를 위해 일한 것은 다음과 같습니다.

<div style='display: inline-flex; width: 80px; height: 80px;'>
<img style='max-width: 100%; max-height: 100%' src='image file'>
</div>

이미지가 div 외부로 나가지 않도록 인라인 플렉스가 필요했습니다.