HTML 이미지를 부모의 부모에게 맞 춥니 다

일부 div 안에 이미지를 넣고 가로 세로 비율을 변경하지 않고 가능한 한 크게 만듭니다. 최대 높이와 최대 너비를 이미지와 부모 모두에서 100 %로 설정하면 작동하지 않고 이미지가 오버플로됩니다 (상위 이미지에 너비 또는 높이가 없기 때문에 이미지 크기가 조정될 수 없기 때문에 이미지가 오버 플로우됩니다). HTML 이미지를 부모의 부모에게 맞 춥니 다

JSFiddle

<div class="block"> 
    <div class="row"> 
    <div class="col-xs-9"> 
     <div class="thumbnail"> 
     <img class="placeholder" src="https://unsplash.it/900/600" alt=""> 
     </div> 
    </div> 
    <div class="col-xs-3"> 
    </div> 
    </div> 
</div>

편집 :
내가 정말 쓸 시간이있을 때 나중에 저녁을 달성하기 위해 원하는 것을 명확히한다.

출처

2016-08-22 igor treptau

부모가 div과 일치하도록하려면 display:table;을 "outline-block"css 클래스에 추가하십시오. 스택 오버 플로우에

Fiddle

유사 게시물 : how-do-i-auto-resize-an-image-to-fit-a-div-container

출처

2016-08-22 17:04:56 Arjun

에 http : // fiddle.jshell.net/cgj58gL0/1/ – Goku

이것은 "블록"의 높이를 이미지로 설정하지만 오버 플로우없이 이미지가 "블록"내부에 들어 오길 원합니다. –

@igortreptau 여기에서 코드를 업데이트했습니다 : [링크] (http://fiddle.jshell.net/cgj58gL0/3/) ('img' 태그에 직접'css' 적용) – Arjun

이 .thumbnail에 배경 이미지로 이미지를 설정하고 수축이 사용하는 크기 background-size (demo)입니다 :

.thumbnail { 
    display: inline-block; 
    margin: 0; 
    height: 100%; 
    width: 100%; 
    background: url("https://unsplash.it/900/600") no-repeat; 
    background-size: contain; 
}

출처

2016-08-22 17:22:13

HTML 이미지를 부모의 부모에게 맞 춥니 다

답변

관련 문제