當我進入移動視圖時不需要的空白區域

有人知道如何洗掉這個空白嗎？這只發生在我在移動視圖中時。問題的影像。無標題：

我嘗試使用回應而不是流體，但這并不能完全解決問題，影像只是按比例放大。

這些盒子的 HTML 代碼

<div class="row no-gutters">
  <div class="col-6 d-flex align-items-center flex-column justify-content-center bg-dark">
    <h2 class="mb-0 text-white">Za miran ?ivot bez stresa!</h2>
    <br>
    <p class="mb-0 text-white-50">321 GARA?NO MESTO</p>
    <p class="mb-0 text-white-50">  priklju?ci za elektri?ni automobil, auto-perionica u gara?i.</p>
  </div>
  <div class="col-6">
    <img src="assets/img/slikablok2.jpg" class="img-fluid">
  </div>
</div>

<div class="row no-gutters">
  <div class="col-6">
    <img src="assets/img/slikablok3.jpg" class="img-fluid">
  </div>
  <div class="col-6 d-flex align-items-center flex-column justify-content-center bg-dark">
    <h2 class="text-white"> SPOJITE SE SA PRIRODOM! </h2>
    <br>
    <p class="mb-0 text-white">Na?a inspiracija – Gorica, simbol je magi?nog lijepog parka koji se prostire 
    parkom povr?ine od ?ak 1,4 hektara.</p>
    <p class="mb-0 text-white">Njime poru?ujemo da se spojite sa prirodom, procvetate i napredujete.</p>
  </div>
  <div class="col-6 d-flex align-items-center flex-column justify-content-center bg-dark">
    <h2 class="mb-0 text-white">Za sve vremenske prilike i potpuno u?ivanje.</h2>
    <br>
    <p class="mb-0 text-white-50">GRIJANJE I HLA?ENJE</p>
    <p class="mb-0 text-white-50">U stambenom dijlu objekta primenjen je sistem grijanja i hla?enja svih prostorija, najsavremenijom tehnologijom.</p>
  </div>
  <div class="col-6">
    <img src="assets/img/slikablok4.jpg" class="img-fluid">
  </div>
</div>

uj5u.com熱心網友回復：

img-fluid用css替換你的w-100 h-100類object-fit: cover

img {
  object-fit: cover
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="row no-gutters">
  <div class="col-6 d-flex align-items-center flex-column justify-content-center bg-dark">
    <h2 class="mb-0 text-white">Za miran ?ivot bez stresa!</h2>
    <br>
    <p class="mb-0 text-white-50">321 GARA?NO MESTO</p>
    <p class="mb-0 text-white-50">  priklju?ci za elektri?ni automobil, auto-perionica u gara?i.</p>
  </div>
  <div class="col-6">
    <img src="https://picsum.photos/200/300?random=1" class="w-100 h-100">
  </div>
</div>

<div class="row no-gutters">
  <div class="col-6">
    <img src="https://picsum.photos/200/300?random=2"  class="w-100 h-100">
  </div>
  <div class="col-6 d-flex align-items-center flex-column justify-content-center bg-dark">
    <h2 class="text-white"> SPOJITE SE SA PRIRODOM! </h2>
    <br>
    <p class="mb-0 text-white">Na?a inspiracija – Gorica, simbol je magi?nog lijepog parka koji se prostire parkom povr?ine od ?ak 1,4 hektara.</p>
    <p class="mb-0 text-white">Njime poru?ujemo da se spojite sa prirodom, procvetate i napredujete.</p>
  </div>
  <div class="col-6 d-flex align-items-center flex-column justify-content-center bg-dark">
    <h2 class="mb-0 text-white">Za sve vremenske prilike i potpuno u?ivanje.</h2>
    <br>
    <p class="mb-0 text-white-50">GRIJANJE I HLA?ENJE</p>
    <p class="mb-0 text-white-50">U stambenom dijlu objekta primenjen je sistem grijanja i hla?enja svih prostorija, najsavremenijom tehnologijom.</p>
  </div>
  <div class="col-6">
   <img src="https://picsum.photos/200/300?random=3"  class="w-100 h-100">
  </div>
</div>

標籤：html css 图片 引导程序 4

上一篇：我將如何使用PIL來“擴展”影像，然后繪制一個帶有文本的黑色矩形？

下一篇：如何在css中處理影像的alpha層？