Question

有谁知道怎么做？我已经尝试了一段时间，但无法让它在底部边缘工作。这个时尚（？）网站展示了我的意思： http://vyctoire.com/

它具有响应性，因此在任何时候（直到移动尺寸），边距都是相等的。你知道用html和css做这个的方法吗？或者甚至还有jquery。

Answer 1

Flexbox有align-items: center;和justify-content: center;我不会像我在我的代码段中那样建议使用它，它只是一个示例，向您展示它的外观。< / p>

＆＃13;

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

＆＃13;

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

＆＃13;

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

如何在屏幕的正中心和四周边距相等的情况下制作响应式图像？

3 个答案: