如何將img完全適合div以便我看不到背景顏色？-有解無憂

div底部可以看到白色背景，可以修復嗎？

.flexbox-item_one {
  display: inline-block;
  width: 200px;
  margin: 10px;
  background-color: white;
  box-shadow: 5px 5px 5px;
  overflow: hidden;
}

.flexbox-item-1 {
  min-height: 300px;
  min-width: 300px;
  border: 3px solid red;
  overflow: hidden;
}

#Aries_pic_1 {
  height: 300px;
  width: 300px;
  inline-size: 100%;
  object-fit: cover;
}

<html>

<div class="flexbox-container">

  <div class="flexbox-item_one flexbox-item-1">

    <div> <a href="Aries_page.html" class="Get_1" target="_blank">

        <img src="https://cf.ltkcdn.net/horoscopes/images/orig/239601-1600x1030-aries-
     constellation.jpg  " id="Aries_pic_1">

      </a>

    </div>

  </div>

</html>

uj5u.com熱心網友回復：

添加display:block將img解決問題。像這樣：

.flexbox-item_one {
  display: inline-block;
  width: 200px;
  margin: 10px;
  background-color: white;
  box-shadow: 5px 5px 5px;
  overflow: hidden;
}

.flexbox-item-1 {
  min-height: 300px;
  min-width: 300px;
  border: 3px solid red;
  overflow: hidden;
}

#Aries_pic_1 {
  height: 300px;
  width: 300px;
  inline-size: 100%;
  object-fit: cover;
  display:block;
}

<html>

<div class="flexbox-container">

  <div class="flexbox-item_one flexbox-item-1">

    <div> <a href="Aries_page.html" class="Get_1" target="_blank">

        <img src="https://images.unsplash.com/photo-1648737155328-0c0012cf2f20?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHw=&auto=format&fit=crop&w=500&q=60" id="Aries_pic_1">

      </a>

    </div>

  </div>

</html>

uj5u.com熱心網友回復：

我會用flex這個。

看到你已經打開了min-width，我懷疑你想要對影像進行回應式大小調整——為此使用固定值不會讓你這樣做。min-heightflexbox-item-1

display: flex在容器元素上會自動讓第二個容器div占用剩余空間，還有a-element。應用max-width: 100%確保img 永遠不會溢位容器。應用height: 100%，object-fit: cover然后瞧，你得到了一個完全回應的容器，img里面有一個 -element。

.flexbox-item_one {
  display: inline-block;
  width: 200px;
  margin: 10px;
  background-color: white;
  box-shadow: 5px 5px 5px;
  overflow: hidden;
}

.flexbox-item-1 {
  min-height: 300px;
  min-width: 300px;
  border: 3px solid red;
  overflow: hidden;
  display: flex;
}

#Aries_pic_1 {
  max-width: 100%;
  height: 100%;
  object-fit: cover;
}

<html>

<div class="flexbox-container">

  <div class="flexbox-item_one flexbox-item-1">

    <div>
      <a href="Aries_page.html" class="Get_1" target="_blank">

        <img src="https://www.fillmurray.com/640/360" id="Aries_pic_1">

      </a>

    </div>

  </div>

</html>

uj5u.com熱心網友回復：

如果真的必須在影像上inline-block設定。vertical-align: bottom默認情況下，行內項與基線對齊，基線比行框底部高幾個 px。

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

標籤：html css

上一篇：無法使用熊貓保存Excel作業表

下一篇：未捕獲的參考錯誤：變數未定義