Question

我得到的图片应该始终填充可用空间，如下所示： https://jsfiddle.net/0236osj6/

除了现有行为外，是否可以将此图像与CSS垂直居中？我已经尝试了一些表格，但没有找到有效的解决方案：

#imagedetails_image table {
    width: 100%;
    height: 100%;
    text-align: center;
}

问题是该表不接受100％的高度。

Answer 1

您可以将父元素设置为display:table，将子元素设置为display:table-cell。在此之后，只需为您的子元素vertical-align: middle。

以下是一个示例：https://jsfiddle.net/zqgwL8tp/

Answer 2

似乎没有针对该确切行为的纯CSS解决方案...

这是一个非常小的javascript版本：https://jsfiddle.net/0236osj6/5/

function imagedetail() {

    var container = jQuery( '#imagedetails_image' ).height();
    var image = jQuery( '#imagedetails_image img' ).height();

    jQuery( '#imagedetails_image img' ).css( 'margin-top', (container-image)/2 );

} imagedetail();

jQuery( window ).resize( function() {
    imagedetail();
} );

图像现在在所有方向上居中，并且永远不会超过父容器

垂直居中的响应式图像

2 个答案: