Restrict Bootstrap Column Width to Container Boundary

I am struggling to create a two-row hierarchy display for a set of photos using bootstrap 5. Despite my efforts, the images overflow out of the container instead of staying within it. My goal is to make the container fill the screen and act as a cover display without requiring the user to scroll. How can I make the images dynamically resize to fit the container?

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="05676a6a71767177647545302b352b37">[email protected]</a>/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 images are currently overflowing like this: https://i.sstatic.net/bABWX.png

Instead, I want them to scale down to look like this: https://i.sstatic.net/sKkWU.png

Even after setting a fixed height on the elements, they still occupy the entire screen, as if the height is not defined relative to the container. Is there another method I can use to display the images so that they can dynamically adjust?

Answer №1

One potential solution to your problem could be to remove the height: 100vh setting on your container.

For example, adding another row without the height restriction showed that your container scaled properly:

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="294b46465d5a5d5b4859691c0719071b">[email protected]</a>/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, reintroducing the height restriction resulted in a less desirable outcome:

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="42202d2d36313630233202776c726c70">[email protected]</a>/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, specifying a height or width for an object imposes a constraint on its size. Removing these constraints allows for a more dynamic layout based on the object's content.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Show a modal with Jquery

Upon page load, I want to display a popup message. The popup is appearing correctly, but the close button in the bar is too big and doesn't fit properly. How can I adjust the size of the bar to accommodate the button? <script src="https://code.j ...

How can I adjust the size and width of the autofocus cursor inside an input box using Angular?

How can I modify the height and width of the cursor in an input field with auto focus? app.component.html <input class="subdisplay" [ngModel]="input | number" type="text" (keyup)="getValue(box.value)" name ...

Angular 8: Bridging the gap between two players with a shared singleton service

I've been working on creating a multiplayer Battleships game, and although the basic functionality is there, I'm struggling to connect two players to the same game. Any assistance would be greatly appreciated! My goal is to create a service that ...

Display PDF on a separate tab when button is clicked in HTML

Is there a way to open a PDF in a new tab or window when a button is clicked? I've tried using onclick="window.location.href" but it always opens the PDF in the same page. Here's my code: <input type="button" value="Report" onclick="location ...

Exploring the power of Vue.js by utilizing nested components within single file components

I have been attempting to implement nested single file components, but it's not working as expected. Below is a snippet of my main.js file : import Vue from 'vue' import BootstrapVue from "bootstrap-vue" import App from './App.vue&apos ...

Challenges related to maintaining a webpage's content using AJAX

I have a form that I want to use to send and insert the values into my database. After the values are inserted, I would like to clear the input fields of the form and display a success message. Here's an example of how I would like it to look: Clear ...

confirmation box for deleting a row in a grid view

I am looking to enhance the delete confirmation box on my Gridview delete function. Currently, I am using a basic Internet Explorer box for confirmation but I want to display a more stylish confirmation box. Here is the JavaScript code snippet within my gr ...

Tips for styling Ajax.ActionLink elements with CSS

Hi there, I'm trying to style a navigation bar using CSS. I'm pulling the navigation bar values from a database using Ajax.ActionLink. I attempted to use JavaScript but encountered an error stating "jQuery is not defined", Here's the cod ...

Is there a way to automatically extract data from a CSV file and display it on a website using either PHP or JavaScript?

I have a web service link at www.xyz.com/abcdefg. When I visit this link, it automatically downloads a CSV file. The CSV file contains columns of data organized like this: Column A Column B Column C Column D test1 1 5 ...

Customizing Bootstrap CSS

In my recent code, I included a bootstrap css reference in this manner: <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5T ...

Compressing CSS with the help of Gulp

Can anyone assist me with minifying my css in this gulpfile.js for compiling css? I have tried multiple code snippets from the internet but none of them seem to work. Your help would be greatly appreciated. Thank you. var gulp = require('gulp&apo ...

Div element remains fixed in width while zooming in

I'm encountering an issue with a centered div, where the width is set to 50% and the max-width is set to 100%. When I zoom in, the width remains constant but the height increases. Despite setting the max-width to 100%, why does this occur? And most im ...

What is the best way to remove query string parameters prior to running a function when a button is clicked?

I'm facing an issue trying to implement a button that filters events based on their tags. The problem arises when the tag value in the query string parameter does not clear when other buttons are clicked. Instead, the new filter tag value adds up with ...

Toggle the disable state of a button depending on a specific condition

I have a scenario where I am fetching data from a server, and I need to apply a filter to a specific column. The requirement is that if the "bought" column (boolean) has a value of true, then the edit button should be disabled; otherwise, it should be enab ...

Incorporating the Results of a Script into TinyMCE with the Help of

Recently, I developed a script for creating a basic table layout structure. To enhance its functionality, I decided to integrate AJAX with jQuery in order to input the output of the script into a TinyMCE textarea. The PHP script itself works seamlessly whe ...

Opacity in text shadow effect using CSS

Within my text lies the following css snippet: .text-description-header { font-size: 250%; color: white; text-shadow: 0 1px 0 black; } Observe the dark shadow effect it possesses. Inquiry I am curious if there is a way to alter the shadow t ...

Layer divs on top of each other without explicitly defining their stacking order

I am looking to stack multiple tile divs on top of each other by using negative margin-right: -10px. My goal is to have the previous div displayed on top, with new sibling divs appearing below it. Currently, the newer div overlaps the previous one. While ...

Struggling to align my image in the center while applying a hover effect using CSS

Hey there, I'm having an issue centering my image when I add instructions for it to tilt on mouseover. If I take out the 'tilt pic' div, the image centers just fine. Can anyone help me identify what I might be doing wrong? Thanks in advance! ...

Flask Modal fails to function properly in the absence of table data

I'm currently troubleshooting an issue with my modal on a Flask web app that utilizes a SQLite database. When trying to add new rows to the table using some JavaScript code, everything works perfectly unless the table is empty. In that case, I am unab ...

How to position a popup window perfectly in the center without having direct access to the popup code

Currently, I am faced with the challenge of using software that does not allow direct editing of HTML on individual pages. Instead, I have the ability to add code to the header and footer to make modifications to the content within the body of each page. ...