調整影像大小時如何隱藏邊框？-有解無憂

我將三張照片放在一個容器中，但由于我希望它們之間有空間，所以我無法保留原始尺寸，因為它們會占據整個容器而不會留下我想要的空間。為了使它們更小，我將高度修改為 80%。它有效，但由于我需要將陰影添加到盒子中，我需要它來匹配影像的邊緣。從紫色可以看出，盒子比實際影像大。我想知道如何得到一個與實際影像一樣大的盒子，所以沒有紫色部分。

我只在第一張圖片中添加了背景顏色，但問題可以擴展到所有三張圖片。調整影像大小時如何隱藏邊框？

我在下面發布代碼。

.background {
  height: 100vh;
  display: flex;
  justify-content: space-between;
}

.background * {
  width: 100%;
  height: 80%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

<div class="background">
  <div class="firstphoto"></div>
  <div class="secondphoto"></div>
  <div class="thirdphoto"></div>
</div>

謝謝大家！;)

uj5u.com熱心網友回復：

你可以看看object-fit屬性：https ://www.w3schools.com/css/css3_object-fit.asp

此外，您應該輸入：

.background > * {
  flex: 1/3;
}

這樣盒子就占據了相同的空間。

uj5u.com熱心網友回復：

您應該將此添加到包含影像的每個 div（如果它們具有相同的類）然后 div 將相對于影像定位，然后您可以使用 box-shadow 屬性編輯 box-shadow

.col{
    position:relative;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    margin-right:3.33%;
    box-shadow: 10px 10px 10px 10px  red;
}

uj5u.com熱心網友回復：

不知道為什么將影像用作背景影像，但我只會使用物件匹配。請注意，我用影像標簽替換了 div。

.background {
  height: 100vh;
  display: flex;
  justify-content: space-between;
}

.background img {
  width: 100%;
  height: 80%;
  padding: 1rem;
  box-sizing: border-box;
  object-fit: contain;
}

<div class="background">
  <img src="https://picsum.photos/200/300" alt="200x300" title="200x300"/>
  <img src="https://picsum.photos/50/150"  alt="50x150"  title="50x150"/>
  <img src="https://picsum.photos/30/150"  alt="30x150"  title="30x150"/>
</div>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/448388.html

標籤：html css

上一篇：折疊的移動回應表

下一篇：CSS影片在結束時不會停止運行