Question

我最近开始使用Bootstrap进行网络开发，此刻陷入困境。

我希望页面从显示为窗口/屏幕宽度的100％和高度的100％减去导航栏的高度的图像开始。由于所有屏幕和窗口的比例都可能不同，因此我的图像将被裁剪。目前，引导程序似乎只是在我图像的右侧切出。

不幸的是，无论如何我都希望一直显示图像的某个部分-因此，裁剪图像的中心应该在图像的该区域。

在Google进行了广泛的搜索之后，我发现了可以实现此目的的方法：Focal Point 不幸的是，我对不同的引导程序类的理解还不够深入，无法知道需要哪种图像/容器类布置，因此，Focal Point可以调整边距以正确显示图像。

我希望你们中的一些人知道Focal Point以及如何使用它，或者知道使用纯自举程序或自定义css / js的方式。

我不知道MWE的精确程度，以便您了解我到底想要什么/可能发生其他部分的问题，因此这是我的页面代码的缩小版本（可能还很长？）。图片的主要部分就在body标签之后。

<html>
<head>
    <title>
        MWE Bootstrap 4: How to keep a certain area in display when resizing
    </title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous" />
    <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>

</head>
<body style="background-color: lightblue">
    <div style="background-image:url('https://via.placeholder.com/1920x1080');">
        <div class="container special">
            <div style="height:calc(100% - 50px);"></div>
        </div>
    </div>
    <nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top" id="navigation">
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="#">Lorem</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#Ipsum">Ipsum</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Dolor</a>
            </li>
        </ul>
    </nav>
    <div class="container uhr-container" id="endlessScroll">
        <div class="card uhr-content mt-2 mb-2" id="Ipsum">
            <div class="card-body">
                <h2 class="card-title">Ipsum</h2>
                <h6 class="card-subtitle mb-2 text-muted">Lorem Ipsum:</h6>
                <p class="card-text">
                    <ul>
                        <li> 
                            Lorem
                        </li>
                        <li>
                            ipsum
                        </li>
                        <li>
                            dolor
                        </li>
                    </ul>
                </p>
            </div>
        </div>
    </div>
</body>

Bootstrap 4：调整大小时如何保持特定区域显示

0 个答案: