CSS中如何在盒子里插入圖片

在CSS中，我們可以使用display屬性將盒子設(shè)置為flex或grid布局，然后使用justify-content和align-items屬性將圖片放置在盒子的中心位置，以下是一個示例代碼：

<div class="box">
  <img src="image.jpg" alt="圖片">
</div>

.box {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  width: 200px;
  border: 1px solid #000;
}

在這個示例中，我們創(chuàng)建了一個名為box的盒子，并將圖片插入其中，盒子的大小設(shè)置為200px，邊框設(shè)置為1px的黑色實線，通過justify-content和align-items屬性，我們將圖片放置在盒子的中心位置，這樣，圖片就會顯示在盒子的中心位置，而不會受到其他元素的影響。

需要注意的是，如果圖片本身的大小比盒子小，那么圖片可能會顯得不夠突出，我們可以使用CSS的object-fit屬性來調(diào)整圖片的大小，使其充滿整個盒子。

.box img {
  object-fit: cover;
}

這樣，圖片就會充滿整個盒子，而不會留下空白區(qū)域，圖片也會保持其原有的比例，不會變形。