DIV 고정 높이 유지, div 내부 이미지 변경 허용

내가하려는 것은 고정 높이가 95 %이고 너비가 100 % 인 컨테이너를 사용하는 것입니다. 그 div 안에는 가변 높이/너비가있는 이미지가 있습니다.DIV 고정 높이 유지, div 내부 이미지 변경 허용

컨테이너의 높이/너비가 일정하게 유지되지만 이미지 (jQuery로 변경)가 컨테이너보다 작고 가운데에 오도록 허용하려면 어떻게해야합니까?

이 내가 놀아 된 내 현재 CSS하지만 난 아직 운이했다 havnt :

.gallery-image { 

    text-align:center; 
    line-height:0px; 
    min-height: 95%; 
    max-height: 95%; 
    width: 100%; 
} 

.gallery-image img { 
    max-height:65%; 
    max-width:95%; 
}

어떤 아이디어? 감사. 컨테이너보다 작은

출처

2013-12-13 user3100597

'text-align : center;'로 인해 코드의 중심에 위치해야합니다. 그것이 작동하지 않는 방법을 보여줄 수 있습니까? – TreeTree

이미지가 변경되면 컨테이너의 높이가 줄어 듭니다. – user3100597

컨테이너를 고정 시키거나 가변적으로하고 싶습니까? 당신은 고정되어 있다고 말했지만, 고정 된 비율을 사용한다고 말한 것입니다. – APAD1

방금 최대 폭 및 최대 높이 스타일을 설정해야, 상대적으로 쉽다 - max-width, max-height

센터링이 조금 까다 롭습니다; 그것은 확실히 일부 JavaScript를 포함합니다. 이미지의 크기를 알아야 할 필요가 있습니다 (치수를 읽기 전에 치수를 읽을 때까지 기다릴 필요가 있습니다). 치수를 알고있는 것으로 가정하면 다음과 같습니다.

function centerImage(image,elem){ //elem is the parent container 
    var ratioDiff = (image.width()/image.height()) - (elem.width()/elem.height()); 
    if(!isNaN(ratioDiff)){ 
     if(ratioDiff > 0){ 
      //center vertically - full width 
      image.css({width:elem.width()+'px',position:'relative'}); 
      image.css({top:((elem.height() - image.height())/2)+'px'}); 
     }else{ 
      //center horizontally - full height 
      image.css({height:elem.height()+'px',position:'relative'}); 
      image.css({left:((elem.width() - image.width())/2)+'px'}); 
     } 
    } 
}

이것은 높이와 너비의 비율을 찾고 그에 따라 이미지 크기를 조정하여 작동합니다 (필요한 경우 왼쪽/위쪽 위치 설정). 기본적으로 항상 이미지를 부모 크기로 채우고 부모 내에서 가운데에 배치합니다.

편집 : jQuery를 사용해야합니다. 당신은 (스타일 설정을 다시 작성하고 기능을 가져와야 할 필요없이)이 작업을 수행 할 수 있습니다 ...하지만 왜 그럴까요?

출처

2013-12-13 19:37:09 isick

DIV 고정 높이 유지, div 내부 이미지 변경 허용

답변

관련 문제