Question

HTML ：

<div class="info-panel"></div>
<div class="image">
    <img src="http://placehold.it/960x1400">
</div>

CSS ：

.image {
height: 100%;
width: auto;
margin-right: 200px;
}


.info-panel {
position: fixed;
width: 200px;
height: 100%;
background-color: red;
right: 0px;
}

我试图动态缩放图像（从不向上）以适应image-div（无裁剪），高度（100％）和宽度（设置为自动）可变。图像也需要居中（垂直和水平），并且顶部和底部具有相同的几个像素填充。

您可以在小提琴中看到图像容器旁边的信息面板，但我不确定这是否相关。

我的陈述有意义吗？

谢谢，我已经花了太多时间试验这个！：/

Answer 1

如果我理解正确，您需要类似this的内容。

如果图像太大，它会缩小，但当它适合窗口时保持原始大小。换句话说，它永远不会扩大 - 只有下降。

它是CSS和一些jQuery的组合：

这个简短的JS垂直居中图像：

function verticallyCenterImage(){
    var $img = $('.image img'),
        windowHeight = $(window).outerHeight();

    if($img.height() < windowHeight){
        var delta = windowHeight - $img.height();
        $img.css('margin-top', (delta / 2) + 'px');
    }else{
        $img.attr('style', '');
    }
}

这一行CSS使图像保持水平居中：

.image {
    padding-right: 200px;
    text-align: center;    /* <- this one */
    max-height: 100%;
    overflow: hidden;
}

为了保持图像的原始大小，我只需在img类的.image内设置最大高度和宽度，如下所示：

.image img {
    max-width: 96%;
    max-height: 96%;
    margin: 2%;
}

您可以根据需要调整大小和边距，只需记住彼此保持相关关系：）

Answer 2

您正在将px与％混合。如果只想通过CSS实现，则需要对两个宽度使用％：

.image {
    width: 85%;
}

.image img {
    width: 100%;
}

.info-panel {
    position: fixed;
    width: 15%;
    height: 100%;
    background-color: red;
    right: 0px;
}

...否则，您必须使用JS来计算左侧的当前可用宽度并将其分配给.image div：

HTML

<div class="info-panel"></div>
<div class="image">
    <img src="http://placehold.it/960x1400" />
</div>

CSS

.image {
    min-height: 600px;
    width: auto;
}

.image img {
    width: 100%;
}

.info-panel {
    position: fixed;
    width: 200px;
    height: 100%;
    background-color: red;
    right: 0px;
}

JS（jQuery）

$(document).ready(function() {
    $('.image')
        .css('min-height', 'auto')
        .height($(window).height())
        .width($(window).width() - $('.info-panel').width())
    ;
});

Answer 3

这里讨论的一些技术可能适合您： http://css-tricks.com/centering-in-the-unknown/

诀窍是使用表格元素，或CSS 2.1表格显示。

修改：此处有更多方法：http://www.vanseodesign.com/css/vertical-centering/

使用JS在可变大小div中缩放和居中图像

3 个答案: