保持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內的圖像改變

回答

相關問題