Держите DIV фиксированную высоту, позвольте изображению внутри div изменить

Question

То, что я пытаюсь сделать, это иметь контейнер с фиксированной высотой 95% и шириной 100%. Затем внутри этого 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%; 
} 

Любые идеи? Благодарю.

Answer 1

Меньше чем контейнера относительно легко, вам просто нужно будет установить макс-ширина и максимальная высота стилей - 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'}); 
     } 
    } 
} 

Это работает путем нахождения отношения высоты к ширине и масштабирования изображения соответственно (при необходимости установите положение слева/сверху). Он будет в основном всегда заполнять изображение до размера родителя и центрироваться внутри родителя.

EDIT: Я должен упомянуть, что это использует jQuery. Вы можете выполнить это без (просто нужно будет переписать стиль и получить функции) ... но почему бы вам?