居中：显示 table 和最大宽度的 img

Question

我在 Internet Explorer 11 及更低版本上遇到问题。

集中显示一个盒子 table 很容易。问题是当此框中的 "main" 元素是图像时。

在桌面尺寸中，工作正常，但在响应式中，图像的最大宽度不起作用。当然，尝试从带有 display: table 的框中获取 max-width 没有任何意义。考虑到这一点，我尝试了很多其他属性，但都没有成功。

示例：http://jsfiddle.net/v2f73uk8/（在 IE 上测试）

figure{
    position: relative;
    display: table;
    margin: 0 auto;
}

figcaption{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: red;
    -webkit-opacity: 0.5;
    -moz-opacity: 0.5;
    -ms-opacity: 0.5;
    opacity: 0.5;
}

img{
    max-width: 100%;
    vertical-align: middle;
}

这个例子基本上就是我的问题所在。 figcaption 大小必须与图像/图形相同。如果我删除显示 table，figcaption 从图中获取宽度（在本例中，100%/块）。

解决这个问题的真正方法是设置一个最大宽度和宽度：100% 到数字（就像 wrap 技巧），但是，如果我这样做，这永远不会获得动态宽度。

我做什么？

Answer 1

您可以使用 inline-block 代替 table。这样图形将始终获得与图像相同的宽度。并设置 max-width: 100%; 使其响应。

演示，http://jsfiddle.net/v2f73uk8/1/

body {
    text-align: center;
}

figure{
    position: relative;
    display: inline-block;
    margin: 0 auto; /*no need this anymore*/
    max-width: 100%;
}

figcaption{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: red;
    -webkit-opacity: 0.5;
    -moz-opacity: 0.5;
    -ms-opacity: 0.5;
    opacity: 0.5;
}

img{
    max-width: 100%;
    vertical-align: middle;
}

注意，我将 text-align: center; 添加到 <body> 以使 <figure> 居中。

经过测试甚至可以回到 IE9。

居中：显示 table 和最大宽度的 img

Centering: display table and img with max-width

html

css

internet-explorer