尺寸相同的多張照片

我想爲展覽打造一個網站，但我不知道如何讓多張照片具有相同的尺寸而不會損失質量。例如看看這傢伙的網站：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

我認爲這是可能的，而不必切斷部分圖像。現在你說了哪些部分要切斷，你可以選擇嗎？ –

尺寸相同的多張照片

回答

相關問題