What steps can I take to ensure that the images in my bootstrap card display without being cut off?

I utilized the bootstrap card component to showcase products on my online store. I made an effort to ensure that all product images within the cards are of the same height by implementing some custom CSS. While the images do resize properly, there is an issue with them being cut off at the top.

How can I prevent this truncation from happening?

//HTML
<!-- Card for displaying products -->
<div class="card-deck h-100">      
<div class="card border-secondary">
<img src="image.jpg" class="card-img-top img-fliud"><!-- Product image goes here -->
<div class="card-body">
Additional card content...
</div>
<div>
<div>



//CSS
/* Ensuring equal height for product images */
.card-img-top {
    /*height: 11vw;*/
    max-height: 230px;
    min-height: 230px;
    width: 100%;
    object-fit: cover;
}

Any sample code suggestions would be greatly appreciated.

Answer №1

In order to achieve the desired effect, you can utilize the CSS property object-position: 100% 0%;

(Remember to change the class from img-fliud to img-fluid)

.card-img-top {
  /*height: 11vw;*/
  max-height: 230px;
  min-height: 230px;
  width: 100%;
  object-position: 100% 0%;
  object-fit: cover;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<div class="container">
  <div class="card-deck h-100">
    <div class="card border-secondary">
      <img src="https://www.w3schools.com/bootstrap4/img_avatar1.png" class="card-img-top img-fluid">
      <!-- card image here -->
      <div class="card-body">
        Other Card Text here...
      </div>
      <div>
        <div>
        </div>

Answer №2

There seems to be a spelling error. It should be img-fluid instead of img-fliud. I suggest correcting it.

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

I'm looking to conceal the carousel specifically on mobile devices

Is it possible to hide a Bootstrap 4 carousel on mobile devices? If so, how can I achieve this? <!--Carousel Wrapper--> <div id="carousel-example-3" class="carousel carousel-fade white-text" data-ride="carousel" data-interval="false"> < ...

Tips for preventing inline tags from wrapping in PhpStorm 2016.3 while formatting HTML

Here's a snippet of code I'm working with: <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit ...

Vibrant progress bar design with CSS

Could someone assist me in coding a multicolor progress bar? I would like it to display red when the progress is less than 50, green when the progress is between 50 and 90, and blue when the progress is between 90 and 100. How can I achieve this? ...

Modifying CSS properties in a component using Javascript: A step-by-step guide

Utilizing the vue-form-wizard component initially displays as follows: https://i.sstatic.net/jwWlP.png After customizing the styles to fit my requirements, I encountered two issues. First: The wizard is supposed to commence before the bullets and the pr ...

Refreshing the Table to Update Data

I am working on a jquery application that includes a table with time and number fields. My goal is to increment the values every 3 seconds by creating a function to update the numbers automatically. Initially, the data in the table looks like this: Kobe ...

Container containing sliding content underneath

I've designed a grid with separate boxes that reveal related content when clicked. The display of this content is achieved using jQuery's slideToggle feature. The setup functions smoothly, with each row containing clickable boxes that unveil the ...

Swapping the label of a tooltip in React using Bootstrap 4

When a user chooses a different language in my electron/react/bootstrap 4 app, I need to update the text (title) displayed in a bootstrap tooltip on a button. I have reviewed the bootstrap 4 Tooltip documentation but I am unable to find a way to modify the ...

JSON syntax error: "r" is not a valid token at the beginning position

Currently, I am in the process of developing a web server that is based on STM32 MCU. The workflow involves the browser sending a request to the MCU, which responds with a web HTML file. Users can then adjust parameters and use a form to submit them back t ...

Achieving a shadow effect above a CSS border: tips and tricks

<div class="row"> some content <div class="info-box"> some other content </div> </div> .row { float: left; margin-bottom: 1.5%; border: 1px solid #e3e3e3; -webkit-border-radius: 4px; -moz-border ...

Tips for adjusting layout when screen orientation changes (Apache Cordova)

Is there a way to alter the layout of an HTML file when the orientation changes? I've created an app that looks perfect in portrait mode, but when I switch to landscape, it gets messed up because buttons and other elements are shifting down. I don&apo ...

Tips for utilizing Jquery webcam on mobile devices like Android and iPhone

Currently, I am in the process of developing mobile web applications utilizing jquery mobile and HTML 5. I am working on a feature that requires access to the camera. In order to achieve this functionality, I have integrated the following plugin: While ...

What is the process for inserting a div with an identifier when my check box is selected?

I'm currently working on a dynamic table with table cells that contain checkbox inputs. These checkboxes switch the text between "Available" and "Blocked" depending on whether they are checked or not. I am now trying to add a div with an ID that will ...

Adjust the color of radio button text with Jquery

Here is a sample of radio buttons: <input type='radio' name='ans' value='0'> Apple <input type='radio' name='ans' value='1'> Banana <input type='radio' name='ans&apo ...

Change the blue line to a crisp, clean white

Is it possible to customize the color of the blue line that appears when clicked? class Greetings extends React.Component { render() { return <div>Greetings {this.props.name}</div>; } } ReactDOM.render( <div> <p tabInde ...

Tips for concealing the URL from the bottom left corner of the screen

I'm facing a dilemma with this line of code: <a class="btn btn-block btn-lg" ng-class='login.anchorClass' ng-href="{{login.idp_authnrequest_url}}"><img src="{{login.file_name}}"/>{{login.name}}</ ...

Accessing firebase using a connection to HTML5 through codeanywhere's devbox

Recently, I added Firebase to my CodeAnywhere HTML5 connection. However, when I tried to execute the shell command firebase login, I was directed to a URL to log in. Despite successfully logging in and granting the necessary permissions, I encountered an e ...

Is there a way to have text positioned to the left and the right on a single line simultaneously?

Is there a way to format text so that some aligns left and some aligns right on the same line? <p>This text should be aligned left. This text should be aligned right.</p> I can align all text to the left or right, either inline or through a s ...

Ending Current Tab using angularJS Controller

Is there a way to automatically close the current browser tab after a successful action in AngularJS? ...

Is there a link outside a webpage that has Facebook connect capabilities?

Recently, I started delving into the world of the Facebook API. My initial experiment was a simple "Hello World" application that displays the logged-in username. Everything was working perfectly when I had the FB.init() function inline - the "Login using ...

The final Bootstrap radio element is missing from view

Presented below is the form in question: <!DOCTYPE html> <html lang="de"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, ...