画像がブートストラップ4のページ全体に収まるように、列とコンテナーを最大の高さに設定するにはどうすればよいですか？
フィアコーダー
ブートストラップ4の行に2つの列があります。画面全体を使用して画像を表示したいと思います。これは私のコードです：
<div class="container-fluid" style="padding-left:0px;">
<div class="row">
<div class="col-md-6 ">
<img class="img-fluid" src="jumbo_background.jpg" />
</div>
<div class="col-md-6">
<div class="contact-wrapper">
<p>Test</p>
</div>
</div>
</div>
</div>
すべてが正常に機能し、応答性がありますが、これは私がこのコードから得た結果です：
私が望む好ましい結果はこれです：
私が使用する写真の寸法は6000X4000です
私が試した解決策：
html, body {
height: 100%;
}
Google devツールを使用してブラウザを調べたところ、本体が100％であることがわかりましたが、それでも希望する結果は得られませんでした。
私はh-100ブートストラップから使用しましたが、それでも同じ結果が得られます。
使用しheight: 100vh;たことがありますが、小さいデバイスでは応答しません
I have checked this link:
Height not 100% on Container Fluid even though html and body are
Still don't get the result I want.
How can I give the image a full height in bootstrap 4?
UPDATE:
After nikolay solution on resolution: 1156 x 1013
tao
You seem to want to use the image as a background. So my suggestion would be to do just that, as the cross-browser support is better (I'm not saying it can't be done with <img> alone, only that it's easier with background-image). Do note I'm leaving the <img> tag in for two reasons:
- SEO indexing (if you need it)
- sizing the column properly on mobile devices.
However, the <img> is not rendered. You're always looking at the background image of the <div>.
これは、それぞれsrcの最初の<img>要素の属性を取得し、.column-imageそれを<div>sとして使用するソリューションbackgroundImageです。それが機能するために<div>は、がimage-columnクラスを持っていることを確認してください：
$(function() {
$('.image-column').each(function() {
const src = $('img', this).eq(0).attr('src');
if (src) {
$(this).css({ backgroundImage: `url(${src})` })
}
})
});.image-column {
min-height: 100vh;
background: transparent no-repeat center /cover;
}
.image-column .img-responsive {
visibility: hidden;
}
@media(max-width: 767px) {
.image-column {
min-height: 0;
}
.image-column .img-responsive {
width: 100%;
height: auto;
}
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<div class="container-fluid">
<div class="row">
<div class="col-md-6 image-column">
<img src="https://i.picsum.photos/id/237/600/400.jpg" class="img-responsive">
</div>
<div class="col-md-6">
<div class="contact-wrapper">
<p>Test</p>
</div>
</div>
</div>
</div>注：それは両方として使われているにもかかわらずsrcの<img>とbackground-imageのは<div>、リソース（画像）は、一度だけロードされます。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
編集
コメントを追加