Force Bootstrap Columns to Stay Within Container

Question

I am trying to have a two row hierarchy display for some photos using bootstrap 5. However, rather than staying within the container the images overflow out. I want the container to fill the screen so that it acts as a cover display without the user having to scroll. How can I make them dynamically resize to fit the container?

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

The elements are overflowing like this:

I want it to instead scale down the images to look like this:

I tried setting a set height on the elements, but then they take up the whole screen as if the height is not defined relative to the container. Is there some different method I can use to display the images so that they change dynamically?

This question might be helpful: https://stackoverflow.com/questions/21103622/auto-resize-image-in-css-flexbox-layout-and-keeping-aspect-ratio — Carol Skelly, Jul 21 '21 at 12:02

Dexterians · Answer 1 · 2021-07-21T01:31:44.563

The only thing I can think of regarding your issue is the fact you have height: 100vh set on your container. Remove it.

As you can see here, I added another row and your container scaled just fine;

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

However, if you put the height back in, you will see not so fine;

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

Remember, if you set a height or width of an object it is BOUND to that restriction. If you remove width or height, it's dynamic or based on the object.

Thanks for your time! That makes sense why that is an issue. But I want the content to fit into the screen rather than the user having to scroll. Is there any way to make it able to compress with the container still only filling the screen? — Catogram, Jul 21 '21 at 03:05
What you are looking to achieve will require a massive rework. You will want to look in to CSS GRID, or SCALABLE CSS GRIDS - https://nebulab.com/blog/fully-scalable-css-grid - you will see these guides don't use set values like you are using which causes things to break out of their bounds (ie your height is 100vh but your padding and other css pushes objects outside that 100vh). — Dexterians, Jul 21 '21 at 03:57
I found a stack question that might answer your question; https://stackoverflow.com/questions/51577807/responsive-css-grid-with-persistent-aspect-ratio — Dexterians, Jul 21 '21 at 04:10

Force Bootstrap Columns to Stay Within Container

1 Answers1