javascript - 纯 CSS 方法在显示 :table element? 内保持图像比例

Question

我根本不知道该怎么做，或者使用纯 CSS 是否可行？

这是我的代码库......

<article class="layer">
      <img src="whatever.jpg" alt="image"/>
</article>

html, body, #content {
    margin: 0; padding: 0;
    height: 100%;
    width: 100%;
}

article.layer {
    position: relative;
    display: table;
    height: 100%;
    width: 100%;
}

所以我有类 layer 的文章它们被设置为 display:table因为我希望它们与当前视口(viewport)一样高和宽。

每篇文章都有一个 <img>里面有不同的尺寸。

我正在尝试创建一种响应式网页设计!

<img>在article里面s 应该在其父文章中居中，并且有大约 30px 的边距。调整浏览器窗口大小时，图像也应缩放。

这是一个示例:http://jsbin.com/ugumuj/edit#preview

首先:如何让图像在 display:table 元素中居中？它应该垂直和水平居中。

我是否必须指定图像的宽度和高度，或者是否可以在浏览器窗口中将其设置为 100% 宽度和额外的 30 像素边距。

我想我可能需要大量的 javascript 才能做到这一点，对吗？

问候，马特

Answer 1

垂直居中相当简单。您需要在父(文章)元素上使用 text-align: center 并使用

margin: auto;

图像本身。对于垂直居中，我猜你需要 margin-top 和一个百分比值。

示例:http://jsbin.com/ugumuj/11/edit