所以，我有一小段測驗代碼，我試圖在 BS5 中將影像放入父 div 中，如下所示。挑戰在于影像在寬度上留下了相當大的間隙。盡管使用.img-fluid類。附加的結果并不理想。有很大的差距。
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Google Font -->
<link href="https://fonts.googleapis.com/css?family=Nunito:200,300,400,700" rel="stylesheet">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!-- Custom CSS -->
<link rel="stylesheet" href="app.css">
<title>Practice </title>
</head>
<body>
<section class="container-fluid">
<div class="row g-0 h-50 border border-2 border-success ">
<div class="col-6 px-0"></div>
<div class="col-6 px-0">
<img src="image-header-desktop.jpg" alt="" class="img-fluid">
</div>
</div>
</section>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X 965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH 8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity="sha384-ZMP7rVo3mIykV 2 9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity="sha384-ChfqqxuZUCnJSK3 MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"></script>
</body>
</html>
uj5u.com熱心網友回復：
為什么不寫一個行內css。
<img src="image-header-desktop.jpg" alt="" style="width: 100%">
uj5u.com熱心網友回復：
我認為你col-6的里面有影像......它讓這個東西出現在頁面的左側？？這應該作業...
<div class="col-6 mx-auto px-0">
<img src="image-header-desktop.jpg" alt="" class="img-fluid">
</div>
上面的 Tha 僅將您的正常內容放在頁面上并將mx-auto其居中，我只添加了包含您的影像的 Div 居中。
您也可以嘗試col-8 col-9 col-10使影像更大。無論您有多少列寬，它仍然是流暢的并擴展了整個寬度。當然，您不希望它流暢地擴展到比正常像素尺寸更大的尺寸。
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/355569.html
上一篇：如何為鏈接創建類或ID