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>内部，大小不同。

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

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

以下是一个示例：http://jsbin.com/ugumuj/edit#preview

首先关闭：如何将图像置于显示内部：table元素？它应该垂直和水平居中。

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

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

问候，亚光

Answer 1

垂直中心相当简单。您需要父（article）元素上的text-align: center并使用

margin: auto;

关于图像本身。对于垂直中心，我猜你需要margin-top，例如百分比值。

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

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;
}

但是，添加30px的保证金并不容易。百分比关系适用于屏幕大小，因此只需添加边距就会使其溢出屏幕。最简单的方法可能是添加position: absolute的全屏div，它将作为测量百分比的新参考。

完整代码（没有30px保证金）在这里： http://jsbin.com/ugumuj/10/edit

纯CSS方式保持图像在显示内部的比例：表格元素？

2 个答案: