同じサイズの複数の写真

私は展覧会用のウェブサイトを構築したいと思いますが、品質を損なうことなく複数の写真を同じ次元にする方法はわかりません。たとえば、この男のウェブサイトをご覧ください：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の代わりに：

<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>

の代わりに

これはもちろん、画像の一部を切り取らなければならないことを意味します（あなたが提供したウェブサイトの例のように）。どの部分が表示されているかを制御するには、CSSプロパティで受け入れる値を調べます。 background-sizeとbackground-positionの詳細については

は：

出典

2017-11-25 22:02:08 vronjec

うん、私はすでにそれを試してみましたが、私はカバーを使用する場合は、画像の一部がカットされます。 –

同じ次元ではない画像を同じ次元にするにはどうすればよいでしょうか？同じ次元を達成するためには、画像の一部を切り取らなければなりません。関連する問題は、切り取る部分です。 – vronjec

画像の一部を切り取らなくても可能だと思いました。そして今、あなたは切り取るべき部分を言ったので、あなたは選ぶことができますか？ –

同じサイズの複数の写真

答えて

関連する問題