Resizing Wordpress images to uniform height within a Bootstrap flex-row with flex-nowrap styling

I have successfully integrated Bootstrap with a Wordpress Underscores Template.

My goal is to create a horizontally scrollable container filled with images of equal height.

Currently, I am facing an issue where the images within the scrollable container do not have the same height.

/*for example purposes*/
.example{
  background:pink;
}

/*underscores style.css*/
img {
    height: auto;
    max-width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4c2e2323383f383e2d3c0c79627d627f">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a0c2cfcfd4d3d4d2c1d0e0958e918e93">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>

<div class="container-fluid overflow-auto border border-dark">
        <div class="row flex-row flex-nowrap">
            <div class="col-3"><img class="example" width="755" height="523"><br><em>text1</em></div> 
            <div class="col-3"><img class="example" width="555" height="623"><br><em>text2</em></div> 
            <div class="col-3"><img class="example" width="455" height="123"><br><em>text3</em></div> 
            <div class="col-3"><img class="example" width="255" height="323"><br><em>text4</em></div> 
            <div class="col-3"><img class="example" width="555" height="823"><br><em>text5</em></div> 
        </div>
    </div

csswordpressimagebootstrap-5image-scaling

Answer №1

When you're unsure of the size of images and want them to match in dimensions, utilizing css is the best approach.

The object-fit property comes in handy for this task. It allows us to resize an image or video to perfectly fit its container, functioning similar to a background-image.

Depending on your requirements, there are various properties available that can be useful. Defining the size of the container accurately is crucial for achieving the desired result.

More information about this property can be found here

An interesting feature it offers is the ability to align the position of the element within the container, known as object-position

Add this to your styling. Specify a height for the images, and let the rest fall into place.

img {
    height: 250px;
    width: 100%;
    object-fit: cover;
}

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

Avoid using the table and table-striped classes when working with Bootstrap 5 to ensure a

Recently updated to bootstrap5.0.0-beta3 along with bootstrap-table 1.18.2 from webjars repository. Here's the code snippet: <table id="table">...</table> <!-- no classes here --> $('#table').bootstrapTable({ ...

cssbootstrap-tablebootstrap-5

Align a series of items in the center while also ensuring they are left-justified

Issue Description : I am facing a problem with centering inline-block elements. When the elements exceed the width of a single line, Action Required : I want them to be justified to the left. I have tried using flex boxes and other methods, but I can ...

htmlcsslayout

Troubleshooting Problems with Woocommerce Ajax Messages

Everything is working perfectly except for a minor issue I am facing. On my custom archive-product.php page, each product is displayed along with a quantity selector... <ul class="woo-products"> <?php $args = array( 'post_type' => & ...

ajaxwordpresswoocommerce

Generate a new style element, establish various classes, and append a class to the element

Is there a more efficient solution available? $("<style>") .attr("type", "text/css") .prependTo("head") .append(".bor {border:2px dotted red} .gto {padding:10px; font-size:medium}"); $("input:text").addClass("bor gto").val("Enter your t ...

javascriptjquerycss

Modifying the color of a div based on a specified value using JavaScript

<div id="navigation"> Add your text here </div> <input type="text" id="newColor"><button onclick="modifyColor()">Update</button> <script> function modifyColor(){ var chosenColor = document.getElementB ...

javascripthtmlcssbackground-color

What is the method for creating a fixed position div that remains until a certain point?

Is there a way to prevent the position: fixed; property from being applied after a certain point on the screen scroll using only CSS? ...

csshtmlfixed

Altering the hover functionality for dynamically created class elements

I have a vision to create a unique e-commerce storefront with tile design, featuring an item thumbnail that reveals the item name upon hovering. I found inspiration from this example, but I want the item name to slide up smoothly on hover, rather than simp ...

javascriptjqueryhtmlcsshover

Swapping the icon in the panel heading of Bootstrap 3 Collapse based on its collapse status

Despite many attempts, I haven't been able to make any of the provided answers work in my code. My setup involves using Bootstrap 3 panels and collapse functionality to display advertisements. In the default view, only the advertisement heading is vi ...

javascriptjquerycsstwitter-bootstrap

Utilize Boostrap to stylishly incorporate an image within a DIV using CSS

I have a project with numerous HTML pages all containing the same elements. To make updating easier, I decided to call all images from the CSS files so that if an image needs to be changed, I only need to update the CSS file rather than each individual HTM ...

htmlcsstwitter-bootstrap

Creating UL tabs using just HTML and CSSHere's a step-by-step guide

Looking for help to accomplish this task. I already have the styling, but I want something to happen when I click on the tabs. Specifically, I want the div with the tab class names to show and hide upon clicking the tabs. Currently, nothing happens when I ...

htmlcsstabshtml-lists

Clear all CSS styles applied to a targeted division

My website built on Wordpress links to several CSS files. One specific div has its own unique style that is separate from the main Wordpress styles. Unfortunately, the Wordpress CSS ends up interfering with my custom div's layout. Is there a way in HT ...

javascripthtmlcssstylesreset

Numerous changes using media queries

Is there a way to have separate transitions in media queries without duplicating code? @media screen and (min-width: 800px) { #div { transition: width 1s; } } #div { transition: height 1s; /* Overrides previous one :( */ } How can I a ...

htmlcssmedia-queriestransition

Customizing Material UI Themes

Is there a way to customize the MuiTheme overrides for a specific named element like this? .MuiStepLabel-label.MuiStepLabel-active { color: rgba(0, 0, 0, 0.87); font-weight: 500; I've attempted modifying various classes such as MuiStepLabelLa ...

javascriptcssreactjsmaterial-ui

What is the method to display HTML code using JavaScript within a span element in a JSP page?

While working on a jsp file, I came across a span tag with the following code: <span id="divBasicSearchResults" style="height:100%;"></span> Below is the Javascript function that generates HTML content for this span: function renderBasicSear ...

javascripthtmlcssjsp

Arrange blocks within bootstrap columns using grid css

I have a layout with two columns, each containing two blocks Currently, the mobile order is: 1 2 3 4 But I want it to be: 3 1 2 4 I attempted to use CSS grid but I am unsure how to move block 3 out of column 2. Here's the code snippet: body { ...

cssbootstrap-4css-grid

Implementing a color change for icons in React upon onClick event

export default function Post({post}) { const [like,setLike] = useState(post.like) const [islike,setIslike] = useState(false) const handler=()=>{ setLike(islike? like-1:like+1 ) setIslike(!islike) } return ( <> <div classNam ...

javascriptcssreactjsmaterial-ui

CSS styling not appearing on HTML button

I'm attempting to create a login page similar to Instagram using HTML and CSS. However, I'm having trouble styling the button to match Instagram's login page. The button <input type="submit" class="sub-btn"> The CS ...

htmlcss

Here's a way to bring attention to a control located within an update panel following the closure of a Bootstrap modal:

A Bootstrap Modal serves as my error notification popup, containing a label to display the error message along with a button. Despite my efforts to use the .Focus method before and after ScriptManager in order to set focus on a specific control within an u ...

asp.netvb.netbootstrap-modalbootstrap-5updatepanel

AngularJS directive for Ionic Leaflet - Utilizing Service to switch tileLayer from side menu

I am currently experimenting with developing an ionic app for the leaflet-angularjs-directive. Unfortunately, there are not many demos available for me to test out. The specific demo I am using is called ionic-leafletjs-map-demo by calendee on GitHub whic ...

javascripthtmlcssangularjsangular-leaflet-directive

How can you incorporate a horizontal line beneath your text, similar to the one shown in the

https://i.sstatic.net/OzMVr.jpg I have a code snippet that needs a horizontal border similar to the one shown in the image <section class="about"> <div class="container"> <h1 class="text-center"> ...

htmlcsstwitter-bootstrap