我完全不知道如何实现这个功能,也不确定用纯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来做到这一点,对吧?
问候,马特