What steps can I take to ensure these three images all have identical height and width?

Just starting out with Bootstrap 4 and I have a question about making images inside a card the same height and width. Can anyone help me figure out which div to input an attribute to achieve this? Here's the HTML code below the image:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col-sm-4 col-md-4 col-lg-4">
    <div class="card">
      <div class="card-body">
        <img class="card-img-top img-responsive" src="https://images.autotrader.com/scaler/620/420/cms/content/articles/oversteer/2017/02-feb/02-24/262253.jpg">
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
  <div class="col-sm-4 col-md-4 col-lg-4">
    <div class="card">
      <div class="card-body">
        <img class="card-img-top img-responsive" src="https://lonestarforklift.com/images/default-source/overview-images/hyundai-80d-9.jpg?sfvrsn=b356117d_0">
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
  <div class="col-sm-4 col-md-4 col-lg-4">
    <div class="card">
      <div class="card-body">
        <img class="card-img-top img-responsive" src="https://www.wagehourinsights.com/wp-content/uploads/sites/697/2014/06/cars-1.jpg">
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
</div>

https://i.sstatic.net/uqZVm.png

Thanks for all the help!

cssbootstrap-4

Answer №1

While it may not be possible to have all images with the same width and height at all times, you can still control the image dimensions to ensure a clean UI layout.

Simply insert the code snippet below and observe the difference:

.card-body .img-responsive{
   max-height: 300px; // Feel free to adjust this height according to your needs
}

I hope this solution proves helpful for your project!

Answer №2

If you want to make your website more visually appealing, consider replacing the <img> tag with a styled <div>. You can use the background-size: cover; property to ensure your images fill the space nicely. If you're worried about images getting cropped, simply change the background-size value to contain. For accessibility and SEO reasons, you can still include the <img> tag within the <div> and hide it using CSS styles.

.img {
  height: 150px; /*adjust height as needed*/
  background-size: cover;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="col-sm-4 col-md-4 col-lg-4">
    <div class="card">
      <div class="card-body">
        <div class="img" style="background-image: url(https://images.autotrader.com/scaler/620/420/cms/content/articles/oversteer/2017/02-feb/02-24/262253.jpg);"></div>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
  <div class="col-sm-4 col-md-4 col-lg-4">
    <div class="card">
      <div class="card-body">
        <div class="img" style="background-image: url(https://lonestarforklift.com/images/default-source/overview-images/hyundai-80d-9.jpg?sfvrsn=b356117d_0);"></div>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
  <div class="col-sm-4 col-md-4 col-lg-4">
    <div class="card">
      <div class="card-body">
        <div class="img" style="background-image: url(https://www.wagehourinsights.com/wp-content/uploads/sites/697/2014/06/cars-1.jpg);"></div>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </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

Personalizing/Concealing Navigation Controls

Looking for a way to customize the Navigation in the Pagination Plugin; changing 'First, Prev, Page 1, Page 2, Next, Last' to 'Prev, Next, Page 1 of 2' The documentation suggests using show_first_last set to false to hide 'First/L ...

javascriptjqueryhtmlcss

CSS switch status toggle

Here's my code for a toggle switch from . I'm trying to change the label before the switch/checkbox to display "checked" or "not checked" based on the toggle state. When I click on the label, it changes the switch but not the text. JavaScript: ...

javascriptjqueryhtmlcss

What could be causing my div to not appear when using jquery's show function?

I'm dealing with HTML code that looks like this: <div id="answerTypeSection" style="visibility: hidden"> <div class="row"> <div class="col-md-2">adfadfafasdfasdfas</div> </div> <label class="control-label"&g ...

javascriptjqueryhtmlcss

Tips for eliminating annoying white space on petite gadgets with css programming?

Having an issue with my static html page where I am seeing white space on the right side when checking responsiveness. I have tried multiple solutions found here on stack overflow, including adding the following code: I attempted to add this inline: html ...

htmlcss

Learn how to implement icons within Textfield components using Material-UI and TypeScript in React

I have successfully created a form with validation using TypeScript Material UI and Formik. Now, I am looking to enhance the visual appeal by adding a material UI Icon within the textfield area. Below is a snippet of my code: import React from 'reac ...

cssreactjstypescriptmaterial-uiformik

Using Java beans to present form data utilizing session

How can I utilize Java Beans and session beans to store user input data and display a preview of the entered details on the next page? I have already created a servlet using JSP, but now I want to incorporate Java Beans to showcase the form data. How shoul ...

javascripthtmljquerycssjavabeans

Maintaining an onExit function in the ui-router framework

I am trying to implement an animation on an element within a page when the user is transitioning out of a state. Here is my current code snippet: { ....., views: { ... }, onExit: function(){ someEle.classList.remove("someClass"); // ...

javascriptcssangularjsangular-ui-router

Ensure that the three.js script remains in a fixed position on a page that can be

Is there a way to make a 3D model created with three.js have a fixed position on a scrollable page, like a background while the rest of the content scrolls normally? Are there any CSS techniques or additional script elements that can be used to achieve thi ...

javascriptcsshtmlthree.js3d

Having trouble with the JQuery class selector?

Having a bit of trouble trying to select an element based on its class using $(".class"), and I can't seem to figure out why it's not working. So, the deal is - I have this image element that should appear when a function gets triggered: $("#co ...

javascriptjqueryhtmlcss

Click on a new tab to enable printing options for the page

I am looking to enhance the print page functionality on my website. Currently, when the print icon in the footer is clicked, it opens the printer dialog box directly. I would like to change this behavior so that when the Print icon is clicked, the contents ...

javascript.nethtmlcssprinting

Using HTML to showcase various prompt messages based on the screen resolution

For the button click event, when clicked on desktop screens it will show a prompt message saying 'Hi'. On the other hand, when clicked on mobile screens, the prompt message displayed will be "Hello". ...

javascriptangularjshtmltwitter-bootstrapcss

What is causing my inline JSX styling to override my media query?

After exhausting all my options and searching high and low for a solution, I am completely stuck. Despite trying various methods like importing media queries from a separate file and using ancestors to target elements, I still cannot get this to work. The ...

cssreactjsjsx

Ensuring a full height div using CSS

I have encountered an issue and created a fiddle to help illustrate it: http://jsfiddle.net/XJpGT/ The challenge I am facing is ensuring that the height of the green box always remains at 100%, while also making sure that the green and orange boxes do not ...

csshtml

Utilizing Bootstrap for GH-Pages

For years, I have maintained a personal webpage hosted on github-pages with a simple HTML structure that has worked perfectly fine. However, recently I came across a stylish website template on bootstrap (https://bootstrapmade.com/) that I am eager to in ...

bootstrap-4github-pagesweb-development-server

Is it possible to utilize the addition assignment operator (`+=`) to modify the `transform:rotate('x'deg);` CSS property using

This is the code I have been working on: #move{ height:70px; width:70px; border:2px solid black; border-radius:15px; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <input type="button" val ...

javascriptjquerycsstransform

OceanWP Theme with a Fixed Navigation Bar

Currently utilizing the oceanwp theme, I'm aiming to create a topbar that vanishes while scrolling and have the menu smoothly transition to the topbar location with some opacity. I attempted the following code snippet: #site-header { position: fixe ...

csswordpress

HTML links remain enclosed in a box even after the code has been finalized

Hey there, I have written this code and for some reason, every link shared after it is displaying with a black background. I'm new to coding and can't seem to figure out what I'm doing wrong. Any help would be greatly appreciated. a:link, ...

htmlcss

Generate captivating background visuals with animated elements that evolve over time

I need help creating a dynamic background image that transitions smoothly every few seconds. The current code I have doesn't include animation, and the images are taking too long to load. Is there a way to optimize the loading time? Here's my ex ...

htmlcssanimationbackgroundbackground-image

Steps for Implementing a Delay on Bootstrap Dropdown Hover

Is there a way to create a delay for the bootstrap dropdown feature while ensuring that it still appears on hover? If you want to test this, click here: http://www.bootply.com/YcVBzvXqrR This is the HTML code I'm using: <div class="container"&g ...

javascriptjqueryhtmlcsstwitter-bootstrap

Sending a variable to the resize() function in jQuery

Currently, I am working with two specific divs in my project: "#sidebar-wrapper" and ".j1". The height of ".j1" is dynamic as it changes based on its content. My objective is to set this height value to the "#sidebar-wrapper" element. I have attempted to ...

javascriptjqueryhtmlcss