如何在display:table元素内使用纯CSS保持图像比例？

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，因为我希望它们与当前视口一样高和宽。

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

我正在尝试创建一种响应式网页设计！ article中的<img>应该在其父元素内居中，并具有大约30像素的边距。调整浏览器窗口大小时，图片也应相应缩放。

这里是一个示例：http://jsbin.com/ugumuj/edit#preview 首先：如何使图像在display:table元素内居中？它应在垂直和水平方向上居中。

我必须分配图像的宽度和高度吗？或者可以将其设置为在浏览器窗口内具有100%的宽度和额外的30px边距。

我想我可能需要很多javascript来做到这一点，对吧？

问候，马特

- matt

---

你需要一个纯CSS的解决方案，那为什么要加jQuery标签呢？ - Rafay

Answer 1

对于垂直居中来说，这是相当简单的。您需要在父元素（article）上使用text-align: center，并使用

margin: auto;

在图片本身上。对于垂直居中，我猜你需要使用margin-top，例如百分比值。

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

- jAndy

---

我本来也想给出这个答案，但我打算赌一下是margin-left:auto;margin-right:auto;。 - cutiko

Answer 2

保持宽高比的关键是使用max-width和max-height而不是width和height：

article.layer img {
   max-width: 80%;
   max-height: 80%;
}

对于居中，您可以使用一个额外的包装器 div，将其放置在 <img> 元素周围：

div.wrap {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

然而，添加30像素的边距并不容易。百分比关系适用于屏幕尺寸，因此仅仅添加一个边距会使其溢出屏幕。最简单的方法可能是添加一个全屏div，并使用“position：absolute”作为百分比测量的新参考点。

这里是完整的代码（不带30px边距）： http://jsbin.com/ugumuj/10/edit

- jpa

---

你可以为.wrap设置内边距来代替图片的边距。 - dfsq