Некоторые части рекомендуемого изображения на домашней странице моего сайта не видны на мобильных устройствах - PullRequest
Новая
       34

Некоторые части рекомендуемого изображения на домашней странице моего сайта не видны на мобильных устройствах

0 голосов
/ 23 апреля 2020

Я создаю новый блог. Он использует flask в качестве бэкэнда. В настоящее время я использую шаблон bootstrap. Я установил изображение как лучшее изображение. На компьютере это правильно отображается. Но на планшетных устройствах это обрезается. Это ссылка на страницу, о которой я говорю. здесь

Я говорю об изображении в самом верху. Буквы слова УЧИТЬ написаны на кубиках.

Мой вопрос, есть ли способ заставить его автоматически изменять размер вместо того, чтобы обрезаться на маленьких экранах.

Код этого раздела - 

<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>

Четвертая строка из последней задает изображение. Было бы здорово, если бы кто-то смог это исправить

Ответы [ 2 ]

0 голосов
/ 23 апреля 2020

Я думаю, вы должны использовать его как изображение с классом img-fluid , который использует 100% ширину внутри div, а для ширины вычисляется высота как auto. 

<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>
0 голосов
/ 23 апреля 2020

Используйте это свойство на фоновом изображении: 

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