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

【问题标题】：Center and stretch images vertically, center horizontally垂直居中和拉伸图像，水平居中
【发布时间】：2015-10-06 12:07:16
【问题描述】：

我想缩放图像，使它们水平和垂直居中，并垂直拉伸，直到它们垂直填满整个屏幕。可能有白色边框。

图像应保持其纵横比。我添加了一张我想做的照片。图像应根据屏幕分辨率进行调整。

从上到下，应该总是有一个图像。如果您调整屏幕大小，图像应该会调整并变小，这样屏幕仍会垂直填充 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/

【问题讨论】：

不清楚你的问题是什么——或者你想要做什么。
我添加了一张带有我想要制作的设计的图片。
@Fl1p - 您实际上是在说“设计”图像对其他人意味着什么？我看到的只是一堆矩形。请努力解释自己...
好的，我明白你想要什么，它很容易制作。给我一分钟
我的英语不是很好...我只会说代码。仍然... :)

标签： html css image-scaling

【解决方案1】：

这里是如何让 3x3 网格覆盖高度的开始。宽度设置为 90%，但您可以随意设置，使用 min/max-width 也可以将其限制为更大/更小的屏幕。

这将为您提供一个大小均匀的正方形图像，较小的图像将放大以适应高度，较大的比例缩小，并且所有图像在每侧均等地裁剪。

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>

【讨论】：

谢谢，今天晚些时候我会检查你的答案！
这正是我所需要的！我改变了边框和边距，现在它对我来说是完美的。非常感谢！

【解决方案2】：

这是演示：

https://jsbin.com/rafute/edit?css,output

CSS：

html, body{
  text-align : center;
  margin     : 0 auto;
  height     : 100%;
}

#grid {
  position  : absolute;
  top       : 0;
  bottom    : 0;
  left      : 0;
  right     : 0;
  margin    : 0 auto;
  font-size : 0; 
}

.grid-element {
  width    : 33.333%;
  height   : 33.333%;
  float    : left;
  position : relative;
  overflow : hidden;
}

.grid-element img{ 
  position  : absolute;
  top       : 50%;
  left      : 50%;
  width     : 150%;
  transform : translate(-50%,-50%);
}

@media (max-width: 900px) {
  #grid .grid-element img{ height:100.5%; width:auto; }
}

这将有效地呈现3x3 图像网格，这些图像将始终适合浏览器窗口，并且图像将尽可能完美地填充网格，当然还有一些裁剪，因为图像有自己的纵横比，而3x3 网格有动态的纵横比。

【讨论】：

谢谢，但你所做的有点不同。我发现高度比宽度更重要。所以图像应该从上到下组合在一起，并且图像之间不允许有空格。不在每个图像的侧面，不在每个图像的下方或上方。整个街区只有左右。所以它们应该以 3x3 的形式并排、从下到上粘在一起。
@Fl1p - 将窗口大小调整为宽度的一半是不合理的。如果是这样，您可以添加 mediaQuery like this。此外，照片的纵横比是未知的，这使得很难有一个只有 CSS 的完美解决方案，同时也是响应式的。
好的。太糟糕了，图像被裁剪了，但我会讲道理：p 这已经是一个更好的解决方案了！感谢您的巨大努力！如果可能的话，我会等待更好的答案。如果没有，我会将此答案标记为解决方案。
当然他们会被裁剪，你他们有自己的纵横比，这是一个常数，grid-element 的纵横比是动态的，因为浏览器调整大小。没有更好的解决方案，除非您想拉伸图像，但它们看起来会变形并且非常糟糕。这个解决方案绝对是最好的。