强制引导列留在容器内

Question

我正在尝试使用引导程序 5 为某些照片显示两行层次结构。但是，图像不会留在容器内，而是溢出了。我希望容器填满屏幕，使其充当封面显示，而无需用户滚动。如何让它们动态调整大小以适应容器？

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" />

<div class="container" style="height: 100vh; background-color: yellow;">
    <div class="row justify-content-center">
        <div class="col col-12 col-md-4">
            <img class="w-100 p-5" src="https://via.placeholder.com/1080" style="border-radius: 80px;">
        </div>
    </div>
    <div class="row">
        <div class="col col-12 col-md-4">
            <img class="w-100 p-5" src="https://via.placeholder.com/1080" style="border-radius: 80px;">
        </div>
        <div class="col col-12 col-md-4">
            <img class="w-100 p-5" src="https://via.placeholder.com/1080" style="border-radius: 80px;">
        </div>
        <div class="col col-12 col-md-4">
            <img class="w-100 p-5" src="https://via.placeholder.com/1080" style="border-radius: 80px;">
        </div>
    </div>
</div>

元素像这样溢出：

我希望它缩小图像，使其看起来像这样：

我尝试在元素上设置一个高度，但是它们占据了整个屏幕，就好像高度没有相对于容器定义一样。我可以使用一些不同的方法来显示图像，以便它们动态变化吗？

Answer 1

关于您的问题，我唯一能想到的就是您在容器上设置了height: 100vh。删除它。

正如您在此处看到的，我添加了另一行并且您的容器缩放得很好；

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" />

<div class="container" style="background-color: yellow;">
    <div class="row justify-content-center">
        <div class="col col-12 col-md-4">
            <img class="w-100 p-5" src="https://via.placeholder.com/1080" style="border-radius: 80px;">
        </div>
    </div>
    <div class="row">
        <div class="col col-12 col-md-4">
            <img class="w-100 p-5" src="https://via.placeholder.com/1080" style="border-radius: 80px;">
        </div>
        <div class="col col-12 col-md-4">
            <img class="w-100 p-5" src="https://via.placeholder.com/1080" style="border-radius: 80px;">
        </div>
        <div class="col col-12 col-md-4">
            <img class="w-100 p-5" src="https://via.placeholder.com/1080" style="border-radius: 80px;">
        </div>
    </div>
   <div class="row">
        <div class="col col-12 col-md-4">
            <img class="w-100 p-5" src="https://via.placeholder.com/1080" style="border-radius: 80px;">
        </div>
        <div class="col col-12 col-md-4">
            <img class="w-100 p-5" src="https://via.placeholder.com/1080" style="border-radius: 80px;">
        </div>
        <div class="col col-12 col-md-4">
            <img class="w-100 p-5" src="https://via.placeholder.com/1080" style="border-radius: 80px;">
        </div>
    </div>
</div>

但是，如果你把高度放回去，你会看到不太好；

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" />

<div class="container" style="height: 100vh; background-color: yellow;">
    <div class="row justify-content-center">
        <div class="col col-12 col-md-4">
            <img class="w-100 p-5" src="https://via.placeholder.com/1080" style="border-radius: 80px;">
        </div>
    </div>
    <div class="row">
        <div class="col col-12 col-md-4">
            <img class="w-100 p-5" src="https://via.placeholder.com/1080" style="border-radius: 80px;">
        </div>
        <div class="col col-12 col-md-4">
            <img class="w-100 p-5" src="https://via.placeholder.com/1080" style="border-radius: 80px;">
        </div>
        <div class="col col-12 col-md-4">
            <img class="w-100 p-5" src="https://via.placeholder.com/1080" style="border-radius: 80px;">
        </div>
    </div>
   <div class="row">
        <div class="col col-12 col-md-4">
            <img class="w-100 p-5" src="https://via.placeholder.com/1080" style="border-radius: 80px;">
        </div>
        <div class="col col-12 col-md-4">
            <img class="w-100 p-5" src="https://via.placeholder.com/1080" style="border-radius: 80px;">
        </div>
        <div class="col col-12 col-md-4">
            <img class="w-100 p-5" src="https://via.placeholder.com/1080" style="border-radius: 80px;">
        </div>
    </div>
</div>

请记住，如果您设置对象的高度或宽度，则它会受到该限制的约束。如果删除宽度或高度，它是动态的或基于对象的。