Question

我要做的是拥有一个固定高度为95％，宽度为100％的容器。然后在div内部是一个高度/宽度可变的图像。

我如何保持容器具有恒定的高度/宽度，但允许图像（使用jQuery更改）比容器小并且居中。

这是我目前使用的CSS，但我还没有运气：

.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样式 - 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。你可以在没有（只需要重新编写样式设置和获取功能）的情况下完成它......但是你为什么要这样做？

保持DIV固定高度，允许div内的图像改变

1 个答案: