Bootstrap gallery with images that resize proportionally

Question

Bootstrap gallery with images that resize proportionally

Attempting to create something simple, but currently unsure how to proceed. A few months ago, I had a concept in mind, but unfortunately lost the files and now feeling stuck.

Using Bootstrap to construct a gallery with two different image sizes: 1920x1200 for long images and 1200x1200px for short ones.

Attempting to organize it in a grid layout like:

<div class="row">
      <div class="col-md-6">
        <img src="yourImg" />
      </div>
      <div class="col-md-3">
        <img src="yourImg" />
      </div>
      ...
</div>

Desiring the final result to resemble the preview image here: https://i.sstatic.net/qFFpk.jpg

Additionally, each image should be centered within its respective column.

Experimented with using JavaScript to match heights, which worked well, but struggled with keeping the image inside the parent div due to JS not detecting div size. Background-image option was considered, but faced similar issues.

Seeking suggestions on how to successfully implement this design. Looking forward to re-building it effectively!

Appreciate any assistance provided! Thank you!

javascript html css bootstrap-4

Answer 1

Answer №1

To ensure that the image fits perfectly within its container div, include the following CSS code:

img {
  max-width: 100%;
  max-height: 100%;
}

If you prefer to maintain the original aspect ratio of the image, you can use this alternative approach:

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

Answer 2

To ensure that the image fits perfectly within its container div, include the following CSS code:

img {
  max-width: 100%;
  max-height: 100%;
}

If you prefer to maintain the original aspect ratio of the image, you can use this alternative approach:

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

Answer 3

Answer №2

Initially, the html structure is incorrect, as each row should have 12 columns but all columns are in one single row.

The correct code structure should look like this:

<div class="row">
    <div class="col-md-6">
       <img>
    </div>
    <div class="col-md-3">
       <img>
    </div>
    <div class="col-md-3">
       <img>
    </div>
</div>

<div class="row">
      <div class="col-md-6">
         <img>
      </div>
    <div class="col-md-6">
         <img>
    </div>
</div>
 
<div class="row">
   <div class="col-md-3">
       <img>
   </div>
   <div class="col-md-3">
       <img>
   </div>
    <div class="col-md-3">
        <img>
    </div>
    <div class="col-md-3">
        <img>
    </div>
</div>

This organization will help arrange the images as desired.

Answer 4

Initially, the html structure is incorrect, as each row should have 12 columns but all columns are in one single row.

The correct code structure should look like this:

<div class="row">
    <div class="col-md-6">
       <img>
    </div>
    <div class="col-md-3">
       <img>
    </div>
    <div class="col-md-3">
       <img>
    </div>
</div>

<div class="row">
      <div class="col-md-6">
         <img>
      </div>
    <div class="col-md-6">
         <img>
    </div>
</div>
 
<div class="row">
   <div class="col-md-3">
       <img>
   </div>
   <div class="col-md-3">
       <img>
   </div>
    <div class="col-md-3">
        <img>
    </div>
    <div class="col-md-3">
        <img>
    </div>
</div>

This organization will help arrange the images as desired.

Bootstrap gallery with images that resize proportionally

Answer №1

Answer №2

Similar questions

Reposition the element at the bottom of its parent element

Initiate Child Event within Parent Component

Disable reloading when submitting and reset input fields after submission

How can CSS be used to select and style all elements within a <p> tag?

Attempting to include a navigation bar within the footer section of my layout page - the master page on my website

Ways to verify the nodemon version that is currently installed on your local machine

Implementing a password prompt in CodeIgniter using JavaScript

Issue: `TypeError: store middleware is not a valid function`

What's the best way to display the spinner while making an axios request?

Tips on sending form data, including a file, to Ajax using the onclick() method

Comparing Redux with passing state down to components as props from the top level of the application

"Enhance Your Website with Various Hover Effects Using CSS across Multiple Elements

Error message thrown by node express.js indicating that response headers cannot be reset once they have been sent

What is the process for retrieving the text element from a React component when using React.cloneElement?

Using AJAX to send a request to a PHP file that populates a popover, but the functionality only works

Creating Diverse Pages with Unique Variables on Identical Layouts in Jekyll

Angular Unit Testing: Executing Multiple expectGET's within a Singular Test

Prevent mouse over scrolling for every <select> element on a webpage using JQuery

The pseudo right arrow is failing to display in the vertical center

Rails 7 Importmap Pins does not work with Jquery source