Question

我想为展览建立一个网站，但我真的不知道如何让多张照片具有相同的尺寸而不会降低质量。例如，看看这个人的网站：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;        
    }

Answer 1

如果您想让不同维度的图片看起来，就像它们是同一维度一样，请尝试使用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的详细信息：

多张相同尺寸的照片

1 个答案: