What's the best way to ensure that my card image stays responsive in Bootstrap 4?

https://i.sstatic.net/teeEl.gif

Just starting out with CSS, so please be patient with me. I'm working on incorporating responsive images within a card. Initially, when there are 6 images in the same row, everything works as expected – the images span 100% of the card's width and are all vertically aligned in the middle regardless of their sizes.

However, I encounter issues when adjusting the screen size. Instead of maintaining 100% width (of the card) and vertically aligning all the images in the middle, what currently happens is that the images float to the top of the card and lose the 100% width.

This issue pertains to Bootstrap. Here is how my image class is defined:

.card-img-top {
  height: 10vw;
  object-fit: contain;
}

Thank you in advance for any help.

EDIT: The code

<div class="row">
  <div-class="col-lg-2 col-md-4 col-6 mt-4">
    <div class="card>
      <img width="100%" src="https://i.ebayimg.com/images/g/mpsAAOSw9T9c~j93/s-l225.webp" class="card-img-top">
      <div class="card-body" style="text-align: center";>
        <div class="car-body-wrapper cards-body">
          <h6 class="card-subtitle">
            <a href="#foo" style="color: rgb(0, 172, 230);">BMW X3</a> 
          </h6><p class="card-text"> </p></div> 
      </div>
    </div>
  </div>
  ... //same for other 5 images
cssbootstrap-4

Answer №1

You can use the following code to adjust the image height in pixels according to your website's requirements. If you encounter any issues, feel free to reach out to me for assistance.

<style>
   .card-img-top {
     height: 150px;
     width:100%;
    object-fit: contain;
  } 
</style>


<body>
<div class="row">
  <div class="col-lg-2 col-md-4 col-6 mt-4">
    <div class="card">
      <img src="https://i.ebayimg.com/images/g/mpsAAOSw9T9c~j93/s-l225.webp" class="card-img-top">
      <div class="card-body" style="text-align: center";>
      <div class="car-body-wrapper cards-body">
      <h6 class="card-subtitle">
        <a href="#foo" style="color: rgb(0, 172, 230);">BMW X3</a> 
      </h6><p class="card-text"> </p></div> 
     </div>
  </div>
 </div>

</body>

Answer №2

To adjust the image size responsively, you can utilize CSS media queries. By placing your CSS code inside these queries, you can ensure that the image will adapt to different screen sizes. Here is an example of how you can implement this:

<style>

/* Styles for extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {  

   /* Your CSS Code for this device size */    

}

/* Styles for small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {  

   /* Your CSS Code for this device size */    

}

/* Styles for medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {  

   /* Your CSS Code for this device size */    

} 
</style>

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

Tips for adding CSS attributes to a <style> tag in Internet Explorer

My current issue involves an ajax web application that loads all parts on a single page, specifically index.html. The inner parts being loaded in index.html have exceeded 32 pages (html, js, css). Now I am facing difficulties with the CSS files that need ...

javascriptjqueryhtmlcssinternet-explorer

Selectors in PHP DOMDocument that mimic jQuery's functionality

Currently, I am working with a DOMDocument and I am curious if there is a way to utilize CSS-like selectors to choose nodes similar to how it is done in jQuery. For instance, let's say I am analyzing an XML file and a portion of it appears as follows ...

phpjquerycssxmlcss-selectors

What steps can I take to prevent divs from overlapping?

Hey there! I need help with a design issue... The height of the green box is dynamic and adjusts to its content. I want the blue box to stay at the bottom using... position: absolute; bottom: 0; The problem arises when the green box grows too big, cau ...

css

What is the best way to create a dual navbar using bootstrap for coding?

Can anybody assist me in creating the following: https://i.sstatic.net/fDXCj.png Here is the code I have been working on: <header> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/c ...

cssvue.jsbootstrap-4

Steer clear of using absolute positioning in Material-UI and React for better styling and layout

Is there a way to achieve the same layout without using position: absolute for the "Hello There" button? I want to remove that CSS property while keeping the design intact. Any better suggestions? Feel free to check out my codesandbox: CODESANDBOX -----&g ...

cssreactjsmaterial-ui

transition-duration is ineffective in a particular div

Whenever I hover over the purple text, I want it to increase in size using the zoom property. Here is an example: I am facing two issues: The time duration does not seem to work even when I try to apply it within the hover and non-hover classes. Wh ...

htmlcss

"Unable to get the overflow-x: auto property to function properly

Below is the CSS and HTML code that I am working with: #container { display: table; margin: 0 auto; } .table-container { width: 100%; overflow-x: auto; _overflow: auto; } <div id='container'> <div class='table-contain ...

htmlcss

Navigating to a Website Based on the Selected Option in a Drop-Down Menu

I am currently working on a form that includes options for selecting a city and social networking site. The goal is to collect information about both the selected city and social network so that it can be stored for future reference. Upon submitting the fo ...

javascripthtmlcss

Finding the Perfect Placement for an Element in Relation to its Companion

Is there a way to achieve an effect similar to Position Relative in CSS using jQuery? I have developed a tooltip that I want to attach to various objects like textboxes, checkboxes, and other text elements. My code looks something like this: <input i ...

javascriptjqueryhtmlcss

alter the color of the accordion display

Good day everyone, I am seeking help with a Bootstrap query. Here is the HTML code I am working on <!DOCTYPE html> <html lang="nl-NL"> <body> <div class="container-md"> <br> <div c ...

htmlcssbootstrap-5

Ensure that the child element completely fills the parent element while maintaining a padding around the edges

How can I create a child div that fills 100% of the parent's width and height, including padding? I've tried using box-sizing = border-box, but it isn't working. I also attempted adding the box-sizing property to all elements with *, but tha ...

htmlcss

Is it possible to make the `<body>` element respect the offset (i.e. the user's current scroll position) when the 'custombox' modal is triggered?

I'm currently facing an issue with the scroll bars in the browser while using custombox.js in combination with BS4. Let me provide some context: I am working with a Custombox modal, which is similar to a BS4 modal. When a modal is opened in BS4, a c ...

jqueryhtmlcssbootstrap-4

The step-by-step guide on creating a unique transition effect with JavaScript

Currently, I am in the process of building this website from scratch for the first time. The overall layout has been designed based on the PSD file I created, and everything seems to be going well. Now, I am looking to enhance the site by incorporating som ...

javascriptjqueryhtmlcssajax

What is the best way to align table headers with their respective content?

Ensuring proper alignment of table columns with their respective headers is crucial. Consider an array of headers: const titles = ['name', 'lastname', 'age'] When displaying the table, the content may be like this: const cont ...

javascripthtmlcssreactjshtml-table

"Modifying the form-control-lg class in Bootstrap and AngularJS affects input size exclusively, leaving the label unaffected

Currently, I am focusing on enhancing an AngularJS custom text input component: <div class="form-group has-feedback" ng-class="[$ctrl.sizeClass, {'has-error': $ctrl.isNotValid(), 'has-success': $ctrl.isValid()}]" > ...

javascriptcssangularjstwitter-bootstraptwitter-bootstrap-3

Hover-triggered custom toggle

A unique toggle has been designed to function in the following manner: Essentially, when the user hovers over "All runs", the toggle will appear in place of the word "All". The user can then switch it to "Last N", input a value, and then move the mouse aw ...

jquerycss

Apply a new class to all Radio buttons that were previously selected, as well as the currently

Struggling with a simple code here, trying to figure out how to add color (class) to the selected radio button and the previous ones. For example, if button No3 is selected, buttons 1, 2, and 3 should get a new color. Below is the basic code snippet: < ...

javascriptjqueryhtmlcss

Building a Subpage in HTML

Imagine you have a website called http://www.example.com If you want to add more subpages to this site, such as: www.example.com/faq www.example.com/contact You can achieve this by following certain steps. ...

htmlcsswebfile-structure

Image input not working in Internet Explorer

While the button displays correctly in Chrome and Firefox, it appears differently in IE: To address this issue in IE, you may need to make adjustments to the CSS styles specifically for that browser. One potential solution could involve creating a separat ...

htmlcsswordpressinternet-explorer

What is the best way to adjust the width of a textarea based on its content

How can I dynamically set the width of a React Semantic UI textarea based on its content? Setting min-width doesn't seem to be working. Any suggestions? <Textarea key={idx} defaultValue={formattedText} className="customInpu ...

javascriptcssreactjstextareasemantic-ui