尺寸相同的多张照片

我想为展览打造一个网站，但我不知道如何让多张照片具有相同的尺寸而不会损失质量。例如看看这家伙的网站：https://www.peterdraws.com/shop/。我希望我的照片看起来像这里。尺寸相同的多张照片

这里是我的html：

<div class="work"> 
      <a href="#"><div class="boxx"><div class="box" style="background: 
      url('img.jpg') no-repeat center center ; 
      -webkit-background-size: contain; 
      -moz-background-size: contain; 
      -o-background-size: contain; 
      background-size: contain;"> 
      </div></div></a> 
      <a href="#"><div class="boxx"><div class="box" style="background: 
      url('img1.jpg') no-repeat center center ; 
      -webkit-background-size: contain; 
      -moz-background-size: contain; 
      -o-background-size: contain; 
      background-size: contain;"> 
      </div></div></a> 
    </div>

这里是CSS：

.work { 
      width: 75%; 
      margin: 0 auto; 
      text-align: center; 
      padding: 40px 0 70px 0; 
    } 

    .work .boxx { 
      width: 350px; 
      height: 400px; 
      display: table-cell; 
      vertical-align: middle; 
    } 

    .work .boxx .box { 
      margin: 0 auto; 
      width: 300px; 
      height: 300px;   
    }

来源

2017-11-25 Catalin Sandu

如果你想使不同尺寸的图像看起来像他们一样的尺寸，可以尝试使用cover代替background-size代替contain：

<div class="work"> 
    <a href="#"> 
     <div class="boxx"> 
      <div class="box" style="background: url('img.jpg') no-repeat center center; 
       -webkit-background-size: cover; 
       -moz-background-size: cover; 
       -o-background-size: cover; 
       background-size: cover;"></div> 
     </div> 
    </a> 
    <a href="#"> 
     <div class="boxx"> 
      <div class="box" style="background: url('img1.jpg') no-repeat center center; 
       -webkit-background-size: cover; 
       -moz-background-size: cover; 
       -o-background-size: cover; 
       background-size: cover;"></div> 
     </div> 
    </a> 
</div>

这当然意味着图像的某些部分必须被切断（就像在您提供的示例网站上一样）。要控制哪些部分可见，请查看background-position CSS属性接受的值。

欲了解更多有关background-size和background-position：

来源

2017-11-25 22:02:08 vronjec

是啊，我已经尝试过，但如果我使用覆盖图像的某些部分将被切断。 –

您还将如何让不同尺寸的图像具有相同的尺寸？为了达到同样的尺寸，你必须切掉部分图像，相关的问题是要切断哪些部分。 – vronjec

我认为这是可能的，而不必切断部分图像。现在你说了哪些部分要切断，你可以选择吗？ –

尺寸相同的多张照片

回答

相关问题