保持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内的图像改变

回答

相关问题