div 내부에 이미지(img)를 맞추고 가로 세로 비율을 유지하려면 어떻게 해야 합니까?

div 내부에 이미지(img)를 맞추고 가로 세로 비율을 유지하려면 어떻게 해야 합니까?

저는 48x48 div를 가지고 있고 그 안에 img 요소가 있습니다, 저는 어떤 부분도 잃지 않고 div에 맞추고 싶습니다, 비율이 유지되는 동안, 그것은 html과 css를 사용하여 달성할 수 있습니까?

사용하다max-height:100%; max-width:100%;디브 내부의 이미지에 대해.

CSS 객체 맞춤

유감스럽게도 최대 너비 + 최대 높이가 내 작업을 완전히 망라하지는 않습니다.그래서 저는 다른 해결책을 찾았습니다.

스케일링 중에 영상 비율을 저장하려면 다음을 사용할 수도 있습니다.object-fitCSS3 속성.

유용한 기사:CSS3로 이미지 가로 세로 비율 제어

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

나쁜 소식: IE가 지원되지 않음(사용할 수 있습니까)

만약 당신이 CSS를 쓸 때 이미지의 치수를 모른다면 자르기를 방지하기 위해 자바스크립트가 필요할 것입니다.

HTML & 자바스크립트

<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 라이브러리를 사용하는 경우 이를 활용할 수 있습니다.

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 디스플레이를 플렉스로 설정해야 한다는 것을 깨달았습니다. 그래서 기본적으로 이것이 제 CSS입니다.

div{
display: flex;
}

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

CSS 사용:

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

저는 다음 CSS가 작동했습니다(크롬, 파이어폭스 및 사파리에서 테스트됨).

여러 가지 기능이 함께 작동합니다.

• max-height: 100%;,max-width: 100%;그리고.height: auto;,width: auto;가로 세로 비율을 유지하면서 처음 100%에 도달한 치수로 img 스케일 만들기
• position: relative;컨테이너 안에 그리고position: absolute;아이와 함께top: 50%;그리고.left: 50%;용기에 img의 왼쪽 상단 모서리를 가운데에 맞춥니다.
• 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%);
}

매우 느리지만 다음 솔루션을 사용해 보십시오.

.parent {
  display: flex;
  min-height: 400px; /* if you prefer */
}

.parent > img {
  display: block;
  width: 100%;
  max-width: 100%;
  object-fit: cover;
}
  

사진을 배경 이미지로 설정하면 크기와 배치를 더 잘 제어할 수 있고 img 태그는 다른 용도로 사용할 수 있습니다.

아래에서 div를 사진과 동일한 가로 세로 비율로 하려면 placeholder.png은 poto.jpg와 동일한 가로 세로 비율을 가진 작고 투명한 이미지입니다.사진이 사각형이면 1pxx1px 자리 표시자, 동영상 썸네일이면 16x9 자리 표시자 등입니다.

질문과 관련하여 1x1 자리 표시자를 사용하여 div의 제곱 비율을 유지하고 배경 이미지는background-size사진의 가로 세로 비율을 유지합니다.

저는 용한사를 요.background-position: center center;따라서 사진은 div의 중심에 놓이게 됩니다. (사진을 수직 중심이나 하단에 정렬하면 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 요청을 방지하려면 자리 표시자 이미지를 데이터: URL로 변환합니다.

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

클래스 "img-fluid"를 새로운 버전, 즉 부트스트랩 v4에 사용할 수 있습니다.

Bootstrap v3와 같은 이전 버전에 대해 클래스 "img-response"를 사용할 수 있습니다.

용도:-

img 태그를 사용합니다.

class="img-message"

src="..."

저에게 효과가 있었던 것은 다음과 같습니다.

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

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

여기 모든 자바스크립트 접근법이 있습니다.정확하게 맞을 때까지 이미지의 크기를 점진적으로 축소합니다.오류가 발생할 때마다 축소할 크기를 선택합니다.다음 예제에서는 오류가 발생할 때마다 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);
});

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

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