What is the method for dividing a card image in half using bootstrap/css?

I'm attempting to divide this image in half and display the designed area on a card. Here is a screenshot for reference, but I'm unsure of how to achieve it:

https://i.sstatic.net/7nNO4.png

Below is the code I have so far: 

<div class="card">
  <img class="card-img-top" src="source" alt="icon">
  <div class="card-body">
    <h4 class="card-title">Card Title</h4>
    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipsicing elit. Illo, quas.</p>
    <a class="btn btn-success btn-block" href="#">Read More</a>
  </div>
</div>
cssbootstrap-4

Answer №1

Utilizing the object-fit property is key here. It's worth noting that this method won't function properly in Internet Explorer, but it does work seamlessly in Edge. If you require support for IE11, I am more than willing to update the solution.

.card img {
  /* adjust the height as needed */
  height: 100px;
  object-fit: cover;
  display: block;
  width: 100%;
}
<div class="card">
  <img class="card-img-top" src="https://via.placeholder.com/600x800" alt="icon">
  <div class="card-body">
    <h4 class="card-title">Card Title</h4>
    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipsicing elit. Illo, quas.</p>
    <a class="btn btn-success btn-block" href="#">Read More</a>
  </div>
</div>

Answer №2

You can check out the code on CodePen here

Another stylish option that I find appealing is incorporating an image as a CSS background-image within a div, giving you complete control over how the image is displayed.

To achieve this, simply add the following CSS rules for the .card-img-top class:

.card-img-top {
    background: url(https://i.sstatic.net/7nNO4.png);
    max-height: 100px;
    height: 100px;
    max-width: 600px;
    margin: auto;
    background-size: 200px 400px;
    background-position: 0px 40%;
    position: relative;
}

The key attributes to focus on are background-size and background-position.

background-size - specifies the dimensions of the background image

background-position - determines the positioning of the background image with respect to the x and y axes

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

Incorporating an external URL into a webpage with a method that allows for overflow

Let me explain my current predicament. I recently created a new navigation menu using a php framework different from the one used in the existing site. Both the new menu and the old site exist on the same domain. To integrate the new navigation, I attempte ...

javascriptjqueryhtmlcss

Can anyone assist with troubleshooting the font size issue for a JavaScript tooltip on Joomla 1.5 with CK Forms?

My Joomla 1.5 site has CK Forms installed and is functioning properly, except for one issue: the tooltip on the captcha is not displaying correctly. It appears in a tiny 1px font size. Even though I have tried debugging using Firebug and confirmed that the ...

javascriptcssfirebugjoomla1.5

Scale transformation - I am aiming for it to exceed the limits, yet it remains contained within

Currently, I am working on enhancing my carousel by implementing a zoom effect when hovering over the images. However, I have encountered an issue where the image gets hidden within the div container and doesn't overflow as expected. I tried adjusting ...

javascriptcssreactjsnext.jssass

Is the text alignment off?

I've been immersed in creating a website, but I encountered an issue for which I can't seem to find the solution. Check out my text alignment here (test) - it's not aligned all the way to the left of the content Here is the HTML code: < ...

htmlcss

Expandable rows within an Angular Material table (mat-table) feature a distinct gap, even when rows are collapsed

I recently integrated an Angular Material table into my website, following the examples provided on the official Angular page (link to the examples). I wanted the table rows to be expandable similar to the "Table with expandable rows" example on the Angula ...

htmlcssangularangular-materialangular-material-table

Ways to create a see-through or non-blinking input cursor

Is there a way to make an input caret unwinking or transparent? I am aware of one method to achieve transparency: color: transparent; text-shadow: 0px 0px 0px #000; However, I am curious if there is another approach to accomplish this. ...

htmlcssinputcaret

What is the reason behind the varying dimensions of images on Chrome compared to Firefox?

I've been working on enhancing my web development skills and decided to create a personal portfolio. During the development process, I focused mainly on Firefox as my browser of choice. One section of the portfolio includes showcasing my skills using ...

cssgoogle-chromefirefoxflexbox

Display the elements of a div at a reduced size of 25% from its original dimensions

I'm currently developing a JavaScript-based iOS simulator that allows users to view their created content on an iPhone and iPad. This involves using AJAX to load the content/page into the simulator, but one issue is that the simulator isn't life- ...

javascripthtmlioscssios-simulator

Issue with Bootstrap 5 dropdown menu on mobile devices when not sliding down upon clicking

Important things to know before getting started: Utilizing Django (python) Implementing Bootstrap Additionally, using html and css Steps taken (in sequence leading up to encountering an error): Copied the navbar template from the bootstrap navbar docume ...

htmlcssfrontendnavbarbootstrap-5

How can I create a unique CSS or JS transition for a button that dynamically changes size based on text

My Angular app features a button labeled with "+". When the user hovers over it, I use element.append(' Add a New Number'); to add the text "Add a New Number" next to the + sign in the label. Upon clicking the button, a new number is added and ...

javascriptjqueryhtmlcssangularjs

How to personalize cell and border spacing within the <table> HTML element

Looking to create a design similar to this https://i.sstatic.net/qONUa.png I attempted using border-spacing, but it applies between all cells. Is there a way to eliminate the space only between label and text cells? Or would using divs for the entire str ...

htmlcss

Ways to crop a background image from the bottom left and right using CSS

I'm attempting to replicate the background image found at https://i.stack.imgur.com/nYDet.jpg My attempts to use clip-art on this image have been unsuccessful in achieving that shape. .hero-section { height: 740px; background: linear-gradient( ...

htmlcss

In Bootstrap 3, the first column in a row will be positioned on the bottom side when viewed on mobile

I have arranged two columns side by side. <div class="row"> <div class="col-lg-2"> I want this column to be at the bottom on mobile devices. </div> <div class="col-lg-8"> I want this column t ...

csstwitter-bootstrap-3

How to maintain aspect ratio when setting max-height on React strap/Bootstrap CardImg?

Currently working on integrating the front-end with a MERN stack application and facing challenges with Reactstrap Cards and CardImgs. I am specifically trying to ensure that the images do not exceed a certain max height, while also keeping all the content ...

htmlcssbootstrap-4reactstrap

Struggling to get image properly aligned using touch gestures

Currently, I am struggling with the task of centering my image based on the touch input that will drag it. For example, if the user touches the top right corner of the image, I want the image to automatically move so that its center aligns with that touch ...

javascripthtmlcss

What is the most effective approach to seamlessly conceal and reveal a button with the assistance

I have two buttons, one for play and one for pause. <td> <?php if($service['ue_status'] == "RUNNING"){ $hideMe = 'd-none'; } ?> <a href="#" class="btn btn-warning ...

javascriptjqueryhtmlcsslaravel-blade

Load css and js files from a directory within Liferay

Is it possible to automatically load all CSS (or JS) files from a specific folder in Liferay 6.2? Below is an example of the liferay-portlet.xml file: <portlet> <portlet-name>Example</portlet-name> <icon>/icon.png</icon ...

cssliferay-6.2

The drop-down items on the navigation bar disappear too quickly

After spending hours getting everything laid out and functioning perfectly, suddenly the menus started disappearing when trying to select an item from the drop down. No matter what I tried, like changing ul ul{display: block;}, the issue persisted. It used ...

htmlcssdrop-down-menunavigation

Creating button groups with a centered .btn using Bootstrap 4

My button group has a link in the middle, so it needs to be an a tag. I could change it to a button and use JavaScript for navigation, but I'd prefer not to. Here is the code: <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bo ...

htmlcsstwitter-bootstrapbootstrap-4

What are some solutions for addressing the viewport width problem that comes up when incorporating Google+ comments on a responsive website

My website looks great on both desktop and mobile devices without any viewport issues, until I added Google+ comments. These comments will automatically set the width of the page to a specified amount: <!-- Google comments --> <script src="https: ...

javascripthtmlcssgoogle-plus