垂直居中和拉伸图像，水平居中

Fl1p 发表于 Dev

F1p

我想缩放图像，以便它们在水平和垂直方向上居中，并且在垂直方向上拉伸直到它们垂直填充整个屏幕。可能会有白色边框。

图像应保持其纵横比。我添加了一张我想做的图片。图像应适应屏幕分辨率。

从上到下，总应该有一个图像。如果您调整屏幕大小，则图像应进行调整并变小，因此屏幕上仍会从上至下垂直填充3张图像。

我不知道如何解释得更清楚...

这就是我得到的：

<head>
<meta charset="utf-8">
<title></title>
    <style type="text/css">
    body html{
        text-align:center;
        margin: 0 auto;
    }
    .clear {
      clear: both;
    }

    #grid {
      height: 100%;
      position:absolute;
      margin: 0 auto;
    }

    .grid-element {
      width: auto;
      height: 33%;
      float: left;
    }

    .stretch {height:100%; width: auto; }
    </style>
</head>
<body>

<div id="grid">
    <div class="grid-element">
        <img src="fotos/bscasino.jpg" class="stretch" />
    </div>

    <div class="grid-element">
        <img src="fotos/frankpollet13.jpg" class="stretch"/>
    </div>

    <div class="grid-element">
        <img src="fotos/groep.jpg" class="stretch"/>
    </div>

    <div class="grid-element">
        <img src="fotos/groepbscasino.jpg"  class="stretch"/>
    </div>

    <div class="grid-element">
        <img src="fotos/kleurpotloden.jpg" class="stretch" />
    </div>

    <div class="grid-element">
        <img src="fotos/paulverrept.jpg" class="stretch" />  
    </div>

    <div class="grid-element">
        <img src="fotos/penselen.jpg" class="stretch" />  
    </div>

    <div class="grid-element">
        <img src="fotos/groep.jpg" class="stretch" />  
    </div>

    <div class="grid-element">
        <img src="fotos/groep.jpg" class="stretch" />  
    </div>

</div>
</body>

网址：http：//www.voorleestoer.be/test/

一个儿子

这是一个如何使3x3网格覆盖高度的开始。宽度设置为90％，但是您可以随意设置宽度，使用最小/最大宽度也将其限制在较大/较小的屏幕上。

这将为您提供均匀大小的图像正方形，较小的图像将按比例放大以适合高度，而较大的则按比例缩小，所有图像均在两边均等地裁剪。

body, html{
  margin: 0;
  padding: 0;
  height: 100%;
}

#grid {
  height: 100%;
  width: 90%;
  margin: 0 auto;
}

.grid-row {
  height: 33%;
}

.grid-element {
  width: 30%;
  height: 94%;
  display: inline-block;
  border: 1px solid black;
  
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
}

.img1, .img4, .img7 {
  background-image: url(http://placehold.it/150x50);
}

.img2, .img5, .img8 {
  background-image: url(http://placehold.it/350x200);
}

.img3, .img6, .img9 {
  background-image: url(http://placehold.it/550x350);
}

<div id="grid">

      <div class="grid-row">

        <div class="grid-element img1">
        </div>

        <div class="grid-element img2">
        </div>

        <div class="grid-element img3">
        </div>

      </div>

      <div class="grid-row">

        <div class="grid-element img4">
        </div>

        <div class="grid-element img5">
        </div>

        <div class="grid-element img6">
        </div>

      </div>

      <div class="grid-row">

        <div class="grid-element img7">
        </div>

        <div class="grid-element img8">
        </div>

        <div class="grid-element img9">
        </div>

      </div>

    </div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。