我的网站首页上特色图片的某些部分在移动设备上不可见

Question

我正在创建一个新博客。它使用flask作为后端。我目前正在使用引导程序模板。我已将图像设置为特色图像。在计算机上可以正确显示。但是在平板电脑设备上，它被裁剪掉了。这是我正在谈论的页面的链接。 here

我在最上面谈论图像。学习单词单词的字母写在多维数据集上。

我的问题是有什么方法可以使其自动调整大小，而不是在较小的屏幕上裁剪。

该部分的代码是

<div class="container">
<div class="jumbotron jumbotron-fluid mb-3 pt-0 pb-0 bg-lightblue position-relative">
    <div class="pl-4 pr-0 h-100 tofront">
        <div class="row justify-content-between">
            <div class="col-md-6 pt-6 pb-6 align-self-center">
                <h1 class="secondfont mb-3 font-weight-bold">AnyGeeks - A Tech Blog</h1>
                <p class="mb-3">
                    Welcome to AnyGeeks. Here we discuss anything about Tech, Provide Tutorials, Blogging Tips, Game Reviews or anything that involves tech.
                </p>
                <a href="./about.html" class="btn btn-dark">Read More</a>
            </div>
            <div class="col-md-6 d-none d-md-block pr-0" style="background-size:cover;background-image:url('{{ url_for('static', filename='img/home.jpg') }}')">    </div>
        </div>
    </div>
</div>

是设置图像的最后一行的第四行。如果有人可以解决这个问题，那就太好了

Answer 1

在背景图片上使用此属性：

background-size: 100% 100%;
background-repeat: no-repeat;

Answer 2

[我认为，您应该将其用作具有img-fluid的图像，该图像在潜水内部使用100％的宽度，并且该宽度将高度计算为自动。

<div class="container">
<div class="jumbotron jumbotron-fluid mb-3 pt-0 pb-0 bg-lightblue position-relative">
    <div class="pl-4 pr-0 h-100 tofront">
        <div class="row justify-content-between">
            <div class="col-md-6 pt-6 pb-6 align-self-center">
                <h1 class="secondfont mb-3 font-weight-bold">AnyGeeks - A Tech Blog</h1>
                <p class="mb-3">
                    Welcome to AnyGeeks. Here we discuss anything about Tech, Provide Tutorials, Blogging Tips, Game Reviews or anything that involves tech.
                </p>
                <a href="./about.html" class="btn btn-dark">Read More</a>
            </div>
            <div class="col-md-6 d-none d-md-block pr-0" >
                <img src="img/home.jpg" class="img-fluid">  
            </div>
        </div>
    </div>
</div>