Employing bootstrap to include oversized images within a compact, fixed div

I am facing an issue with image responsiveness in the middle row of my layout.

Despite using Bootstrap 4 and applying classes like img-fluid, the images in my #fullColumn area do not resize properly. The images are dragged into this area by users and are displayed on a static page below the top and bottom rows.

The header is fixed at the top of the page, while the footer remains at the bottom as intended. However, the #fullColumn section sometimes fails to contain oversized images within its boundaries, causing them to spill out of the designated area.

Since this display is viewed both during creation on a computer and later on large digital screens, all images in the #fullColumn area must be centered and scaled appropriately. Even if a user uploads a high-resolution image, it should fit between the top and bottom rows seamlessly.

To achieve this, I need assistance in ensuring that all images are resized and centered within the middle section. Any suggestions?

https://i.stack.imgur.com/LDl6l.png


        html,
        body {
          height: 100vh;
          width: 100vw;
          overflow: hidden;
        }

        iframe{
          height:100% !important;
          width:100% !important;
        }

        .middle p{
          max-height:100%;
        }

        img {
          max-width: 100%; 
          height:auto;
          margin:0 auto;
        }
        #fullContent{
          display:flex;
          justify-content:center;
          align-items:center;
        }

        .fullContent > img{
          max-width: 100%;
          height: auto;
        }

        #fullContent> img{
            max-width: 100%;
            height: auto;
        }

        .my-container {
          display: flex;
          flex-direction: column;
          justify-content: center;
          height: 100vh;
          width:100vw;
        }

        .my-container>.top [class^="col-"],
        .my-container>.bottom [class^="col-"] {
          background-color: #778899  ;
          color: white;
          text-align: center;
        }

        .my-container>.middle {
          flex-grow: 1;
          padding:30px;
          background-size: cover;
        }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>


<div class="container-fluid my-container d-flex h-100">
<div class="row top">
    <div class="row">
<div class="col-lg-12">
<div class="row" style="background-color: #929292;">
<h3>Top Row</h3>
</div>
</div>
</div>
</div>

<div class="row middle" id="middle" style="background-image: url();">
    <div class="col-lg-12" id="fullColumn">
        <div class="fullContent" id="fullContent" style="height: 100%; ">
                  <p>
                    <img src="https://via.placeholder.com/2000">
                  <p>
        </div>
    </div>
</div>

<div class="row bottom">
<div class="col-lg-12">
    <div class="row"><h2 style="margin: 40px;">Bottom Row</h2></div>
</div>
</div>
</div>

htmlcssbootstrap-4

Answer №1

I made some adjustments to your code (make sure to follow Bootstrap's grid system more closely).
While there may have been other minor edits, the key changes that enabled it to work are:

  • Applied .d-flex on the <p>
  • Inserted the following CSS:
.middle p {
  margin-bottom: 0;
}
#fullContent img {
  object-fit: contain;
}

.my-container .top.row,
.my-container .row.bottom {
  flex-shrink: 0;
}


html,
body {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}


.middle p {
  max-height: 100%;
  margin-bottom: 0;
  display: flex;
}

img {
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

#fullContent {
  display: flex;
  justify-content: center;
  align-items: center;
}

.fullContent>img {
  max-width: 100%;
  height: auto;
}

#fullContent img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

.my-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
}

.my-container>.top [class^="col-"], .my-container>.bottom [class^="col-"] {
  background-color: #778899;
  color: white;
  text-align: center;
}

.my-container>.middle {
  flex-grow: 1;
  padding: 30px;
  background-size: cover;
}

.my-container .top.row,
.my-container .row.bottom {
  flex-shrink: 0;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>


<div class="container-fluid my-container h-100">
  <div class="row top">
    <div class="col-lg-12">
      <h3>Top Row</h3>
    </div>
  </div>

  <div class="row middle" id="middle">
    <div class="col-lg-12" id="fullColumn">
      <div class="fullContent" id="fullContent" style="height: 100%;">
        <p>
          <img src="https://via.placeholder.com/4000x3500">
        </p>
      </div>
    </div>
  </div>

  <div class="row bottom">
    <div class="col-lg-12">
      <h2 style="margin: 40px;">Bottom Row</h2>
    </div>
  </div>
</div>

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

How do I switch the background-image on li hover and revert it back when I move off the li element?

Looking to update the background image of a div upon hovering over a li element? Check out this example here. So far, I've got that part working fine. But now I want the background picture to revert back to its original CSS when I move away from the l ...

javascriptjqueryhtmlcssbackground-image

Use .empty() method to remove all contents from the tbody element after creating a table

Currently, I am working on a project where I am creating a drop-down list to assist users in selecting media and ink for their printers. The goal is to then generate a table displaying the selected results. While I have managed to successfully generate the ...

javascriptjqueryhtmljspdf

The JavaScript code will automatically execute loops

Let me illustrate my point with two functions. Function 1 This function triggers a transition when you hover over the square. If you move your mouse off the element and then back on while the transition is still in progress, it will wait until the end of ...

javascriptjqueryhtmlcssjquery-ui

Steps for creating a horizontal card design

Looking to achieve a card style similar to this: http://prntscr.com/p6svjf How can I create this design to ensure it remains responsive? <div class="recent-work"> <img src="work/mercedes.png"> <h3>Modern website concept</h3&g ...

htmlcss

HTML validation produces mistakes

I encountered an issue when using Google Fonts and received the following error related to a specific link: <link href="http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic|Montserrat:700|Mer ...

htmlcssfontsw3c-validation

Customizing HTML Select Elements

Can the HTML Select attribute be customized to have a flatter appearance? Although I can set the border to be 1px solid, the dropdown part still appears 3D and unattractive. ...

htmlcss

What is the best way to transfer my saved bookmarks and import them into a database?

Over the years, I've amassed a large collection of bookmarks that I now want to organize in a searchable table with additional details like categories, types, and descriptions. My initial approach involved manually inputting them into a JSON file and ...

htmljsoncsvdatatablesbookmarks

What method can I use to incorporate a custom CSS code in Formfacade to conceal the back button on a Google Form?

Looking for a way to hide the back button on my custom questionnaire created with Google Forms? While there is no built-in option to do this directly on Google Forms, I decided to embed my form into Formfacade. However, I am struggling to find the CSS co ...

csshidegoogle-formsback-button

The active link color for navigation in Bootstrap 4

I am trying to update the active menu links to display in green on my website. Despite various attempts, I have not been successful in changing the color. Can anyone provide guidance on how to proceed? My website is built with Bootstrap 4 and mdbootstrap. ...

cssbootstrap-4navigationbar

The client continues to request the file through the REST API

I have noticed a behavior with an audio file stored on the server that clients can request via a REST API. It seems that every time the audio is played again, a new request is sent to the server for the file. Is there a way to prevent this or cache the dat ...

javascripthtmlnode.jsexpress

Implement a fadeout effect by using a timeout function that adds a class to the div element in

I implemented a loader on my webpage that animates for 3 seconds before a function kicks in to modify the styles and make it invisible. I am looking to add a fadeout effect when the 'waa' style is applied to the 'load' div. setTimeou ...

javascripthtmlcss

Discovering a deeply nested div or class using Beautiful Soup

Recently, I came across this URL: All I want to do is extract the zestimate and include it in a list. The specific class where it's located is: class="Text-c11n-8-65-2__sc-aiai24-0 eUxMDw". I attempted to target it at a higher level in th ...

pythonhtmlpandasbeautifulsoup

What is the best way to utilize AJAX to send a value from a foreach loop in Laravel?

I'm encountering an issue where all forms are sending the value as if it's from the first form, however, my intention is for each form to send the data inside it when I press the send button. Blade @foreach($car_lists as $car_list) <li class= ...

javascriptphphtmleloquentlaravel-8

Having trouble customizing the active state of a react router navlink using css modules in React?

Objective I am attempting to add styles to the active route in a sidebar using css modules while still maintaining the base styles by assigning 2 classes. This is the code I have tried: <NavLink to={path} className={` ${classes.nav_ ...

cssreactjsreact-routerreact-router-dom

Is there a way to modify the default color when the header is assigned the "sticky" class?

Currently, I am in the process of building my own website and have implemented an exciting hover effect that randomly selects a color from an array and applies it when hovering over certain elements. However, once the cursor moves away, the color reverts b ...

javascripthtmljquerycssarrays

Here's how you can combine two individual LESS files using grunt-recess

Hey there! I'm working on compiling 2 separate files using grunt recess: recess: { dist: { options: { compile: true }, files: { 'path/css/custom. ...

csslessgruntjsrecesstwitter-recess

Basic AJAX request not functioning properly

I am encountering an issue with a very simple AJAX call on my localhost. I am using a Windows 10 Machine with XAMPP running. I have checked the packages, and it seems that the AJAX request is not being sent to handle.php. Can someone help me figure out wha ...

phpjqueryhtmlajax

Merge the values of two select tags into a single textbox

There are two select Tags along with a text box included. <select name="select1"> <option>1</option> <option>2</option> </select> <select name="select2"> <option>1</option> <option>2 ...

javascripthtml

What are the steps to customize the format of Vue3 Datepicker extensions?

Is there anyone who can lend a hand? I am currently using the Vue3 Datepicker and I have received a value that looks like this Thu Jun 23 2022 17:14:00 GMT+0700 (Western Indonesia Time) Does anyone know how to transform it into the following format? Thu, ...

htmlvue.jsvuejs3

Using HTML to execute a JavaScript function that transforms images

The script cutImageUp has been previously discussed on SE in a thread about Shattering image using canvas. However, I have encountered a different issue while attempting to use it. The HTML code I implemented seems to be ineffective, and despite my efforts ...

javascripthtml