Resize image to fit within a div using Bootstrap

I'm attempting to resize some images to fit into horizontal cards created with Bootstrap-5, but I'm having trouble filling up the div completely. I've been using a main.scss file to manage the Bootstrap CSS and have tried using classes like 'img-fluid' and 'img-responsive' (which haven't worked).

My testing is based on a card template extracted from Bootstrap. https://getbootstrap.com/docs/5.2/components/card/#horizontal

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="main.css">
</head>
<body>
    <div class="container">
        <div class="card" style="width: 18rem;">
            <img src="../modulos/post.jpg" class="card-img-top" alt="...">
            <div class="card-body">
              <h5 class="card-title">Card title</h5>
              <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
              <a href="#" class="btn btn-primary">Go somewhere</a>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="card mb-3 border-light publication-card" style="max-width: 540px;">
            <div class="row g-0">
              <div class="col-md-5">
                <img src="./img/post3.jpg" class="img-fluid rounded-start" alt="...">
              </div>
              <div class="col-md-7">
                <div class="card-body">
                  <h5 class="card-title">Card title</h5>
                  <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                  <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
                </div>
              </div>
            </div>
          </div>
    </div>
    <div class="container">
        <div class="card text-bg-dark">
            <img src="../modulos/post3.jpg" class="card-img" alt="...">
            <div class="card-img-overlay">
              <h5 class="card-title">Card title</h5>
              <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
              <p class="card-text">Last updated 3 mins ago</p>
            </div>
          </div>
    </div>
</body>
</html>

For the .img-fluid class, I have tried various approaches to make the image fill up the div but without success. In the vertical card, the image fits perfectly, and I've also experimented with different image formats like 4:3 or square, but capturing the responsive nature of the website has been challenging.

https://i.sstatic.net/xDRIa.jpg

Answer ā„–1

Consider assigning a class to your image and specifying a custom height/width with the object-fit:cover property.

Answer ā„–2

Increase the image height to 100%:

.img-fluid {
    height: 100%;
 }

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

Scrollable content below the div

I have encountered an issue where a div is positioned above another div, and when I scroll the upper div to the bottom, it ends up scrolling the entire body. To better illustrate this problem, I have created a demo on JSFiddle: http://jsfiddle.net/2Ydr4/ ...

Open the overflow div within a table data cell

My goal is to create a drag-and-drop schedule tool similar to Fullcalendar. I have decided to use a table layout with a rectangular div inside each TD cell to represent tasks. <table onDragEnd={dragend}> <tr> <th>0</th> ...

Is there a way to use Css Autoprefixer on multiple files at once with a single function

My project built with Angular2 contains over 100 CSS files that do not have any prefixes for browsers like Mozilla or Chrome. I am looking for a tool, gulp task, or anything else that can automatically add prefixes to all of my CSS files. I attempted to u ...

Tips for maintaining the fixed positioning of the left and right flex elements (sidebars) as the middle element scrolls, with the scroll bar located on the right side

I am currently designing a webpage with three main elements: a left sidebar, a right sidebar, and a central feed that is 600px wide and scrolls. The scroll bar must be positioned on the right side of the screen, allowing users to scroll by simply using the ...

Trouble with CSS positioning

Styling with CSS: .one { width: 13%; } .two { width: 30%; } .three { width: 30%; } Formatting in HTML: <table> <tr> <th class= "one">Quantity</th> <th class= "two">Info</th> ...

Looking for a solution to a problem with your vertical CSS/jQuery dropdown menu

My web app features a vertical CSS menu that is working correctly except for one minor issue. When I mouse out on all elements with the class a.menutoggle, the last dropdown menu remains open. I am struggling to find a solution to hide it. Can someone plea ...

Getting the next sibling element with Selenium: A complete guide

Having trouble targeting a textbox after the label "First Name" in a list to enter a first name. Here's what I've tried: WebElement firstNameLocTry = driver.findElement(By.xpath("//label[text()='First Name']/following-sibling::d ...

Why do they call me the Commander of Errors?

Alert: PowerShell has detected that a screen reader may be in use and has disabled PSReadLine for compatibility reasons. To re-enable it, simply run 'Import-Module PSReadLine'. PS C:\Web Development> scss --style expanded "c:\W ...

CSS: dynamic font-size based on text length

Can the font size be adjusted based on the length of the text without using JavaScript? I have a box with a width and height of 140px. The content inside should be 100px wide and high (with a 20px padding). The text should utilize this 100px width effecti ...

Dropping down with Twitter Bootstrap's navbar menu

Iā€™m currently facing some challenges with getting the Twitter Bootstrap drop-down navbar feature to function properly. Despite going through various tutorials, I am unable to make it work by directly copying the code. The console displays the following e ...

What is the best way to center my text vertically in each line?

I'm encountering an issue with aligning my text vertically in two lines within a <p> tag. I am trying to position the second line at the bottom of my <div>. I experimented with using vertical-align: bottom and text-bottom along with the to ...

Tips for displaying multiple rows horizontallyALLOWING multiple rows to appear horizontally can be achieved by

This is a demonstration of my desired outcome https://i.sstatic.net/UErvL.png However, I am currently only able to show one product per row. I have attempted the following approach, but it is not functioning as expected. <ol> <?php $no = 1; ...

Cascading Style Sheets displaying inconsistently between local environment and server

Is it just me or does anyone else experience CSS behaving differently on a remote EC2 server compared to a local server? When I load the page and inspect it, I notice that different CSS rules are being applied. I've already executed collectstatic and ...

Personalized designing of each letter

Is there a way to style numbers without using something like <span></span>? I'm looking for a clean way to do this for each sign. Attached is an example showing a "flip clock" effect that I would like to achieve. I have come across plugi ...

What can be done to eliminate the narrow gap between my <input> and <span> components?

Here is what I have: <input style="width: 20px" data-ng-model="row.number" type="text" /> <span style="width: 20px">-</span> Is there a way to eliminate the small gap between the <input> and <span>, as well as centering the ...

Can a HTML div be created with an animation and a hover-scale effect added to it?

I experimented with using divs as clickable buttons that direct to another page on my website. I added animations to make them rotate into view when the site is loaded. Now, I'm trying to implement a hover effect that will scale the buttons when hover ...

Tips for keeping an image stationary when hovering over it

I'm in need of some assistance. Despite my best efforts, I have been unable to achieve the desired outcome. I am looking to create a scenario where an image remains in place even when the mouse hovers over it. Essentially, I want the image to stay vis ...

Center a sans-serif font vertically with exact precision while adjusting the font size

My issue is an expansion of a previous problem I mentioned in another question, which can be found here Vertically align sans-serif font precisely using jquery/css. To summarize: I am aiming to align two divs containing text, with one positioned above the ...

Maintaining Styles After Focus is Removed in CSS: A Guide

The CSS that styles our buttons is as follows: .btn-outline-primary { color: blue; border: 1px solid blue; background: transparent; transition: all 0.3s ease 0s; } .btn-outline-primary:hover, .btn-outline-primary:focus { background: ...

Displaying a visual representation of time remaining with a countdown progress bar

While browsing online, I stumbled upon a creative progress bar code featured on this particular website. My goal is to implement a countdown timer that displays the remaining minutes and seconds rather than a percentage. In order to achieve this, I have i ...