如何在屏幕的正中央制作响应式图像，并在所有侧面制作相等的边距?

Question

>有人知道如何做到这一点吗？我已经尝试了一段时间，但无法让它在底部边距上工作。这个时尚(？(网站演示了我的意思： http://vyctoire.com/

它具有响应性，因此在任何时候(直到移动尺寸(利润都是相等的。你知道使用 html 和 css 来做到这一点的方法吗？甚至使用jquery也是如此。

Answer 1

Flexbox 有align-items: center;，justify-content: center;我永远不会建议像我的片段那样使用它，它只是向您展示它外观的示例。

body {
  display: flex;
  height: 100vh;
  width: 100vw;
  align-items: center;
  justify-content: center;
  margin: 0;
}
.faux-image {
  width: 25vw;
  height: 25vh;
  background: tomato;
}

<div class="faux-image"></div>

Answer 2

在 vyctoire.com 网站上，他们使用绝对定位。使用 CSS，您可以执行以下操作：

.container {
  position: absolute;
  left: 100px;
  top: 100px;
  right: 100px;
  bottom: 100px;
}
/* Supposing the wrapper around #container is 100% wide and high */

或：

.container {
  left: 100px;
  top:  100px;
  width: calc(100vw - 200px);
  height:  calc(100vh - 200px);
}

Answer 3

html 代码

<div id="slider">
 <figure>
 <img src="images/16711537_10208952366430422_5249357485128837134_n.jpg" alt>
  img src="images/images (1).jpg" alt>
 <img src="images/images (2).jpg" alt>
  <img src="images/images.jpg" alt>

</figure>
</div>

为此 IMG SRC 设置图像路径

.css

@keyframes slidy {
   0% { left: 0%; }
  20% { left: 0%; }
   25% { left: -100%; }
  45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
 75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
 }
  body { margin: 0; } 
  div#slider { overflow: hidden; }
  div#slider figure img { width: 20%; float: left; }
  div#slider figure { 
   position: relative;
   width: 500%;
  margin: 0;
   left: 0;
   text-align: left;
    font-size: 0;
   animation: 30s slidy infinite; 
   }