Ensure that the height of the bootstrap image is limited by the dimensions of another column while still preserving its

I need to develop a versatile element with bootstrap that can accommodate images of different aspect ratios. To achieve this, I must trim the right side of the picture like so.

<div class="container">
<div class="row">
  <div class="col-12">
    <div class="card shadow h-100">
      <div class="card-body-article">
        <div class="row no-gutters">
          <div class="col-3 d-flex align-content-center">
            <div class="article-img-crop">
              <img class="article-img" src="https://images.amcnetworks.com/blogs.amctv.com/wp-content/uploads/2013/01/bb-s5-skinny-pete-interview-560.jpg">
            </div>
          </div>
          <div class="col-9">
            <div class="row no-gutters">
              <div class="col-6">
                <div class="card-title">Test</div>
              </div>
              <div class="col-6">
                <div class="text-muted text-right">03/05/2020 12:52pm</div>
              </div>
            </div>
            <div class="row no-gutters">
              <div class="text-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras gravida lectus eu elit maximus rhoncus. Vivamus vitae enim in felis consequat efficitur a quis dui. Aenean id tristique dui, in finibus dui. Etiam ut nunc lobortis, tempor odio ut, ornare metus. Donec convallis tincidunt velit. Nullam ipsum est, condimentum quis nunc quis, sollicitudin condimentum orci. Nunc vehicula porttitor porttitor. Duis et augue vestibulum, iaculis eros vitae, lacinia urna.</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</div>

.article-img-crop {
  position: relative;
  overflow: hidden;
  border-top-left-radius: 0.35rem;
  border-bottom-left-radius: 0.35rem;
}

https://jsfiddle.net/ce3mxnLp/

The challenge lies in the fact that the current form of the element adopts the height of the source image. My goal is for the element's height to be determined by the text quantity, while the image should scale proportionally and crop off a variable portion on the right side. Is this feasible given the flexbox nature of bootstrap columns? It appears I am unable to utilize the column height to control another element's properties.

I would greatly appreciate any assistance. Thank you.

htmlcssbootstrap-4

Answer №1

This answer provides instructions on how to set the width and height of an image.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8>
  <meta name="viewport" content="width=device-width, initial-scale=1>
  <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>
  <style>
    .article-img-crop {
  position: relative;
  overflow: hidden;
  border-top-left-radius: 0.35rem;
  border-bottom-left-radius: 0.35rem;
  left:0px;
}
</style>
</head>
<body>

<div class="container>
<div class="row>
  <div class="col-12>
    <div class="card shadow h-100>
      <div class="card-body-article>
        <div class="row no-gutters>
          <div class="col-3 d-flex align-content-center>
            <div class="article-img-crop>
              <img class="article-img" src="https://images.amcnetworks.com/blogs.amctv.com/wp-content/uploads/2013/01/bb-s5-skinny-pete-interview-560.jpg" style="width:300px;height:100%;">
            </div>
          </div>
          <div class="col-9>
            <div class="row no-gutters>
              <div class="col-6>
                <div class="card-title>Test</div>
              </div>
              <div class="col-6>
                <div class="text-muted text-right>03/05/2020 12:52pm</div>
              </div>
            </div>
            <div class="row no-gutters>
              <div class="text-body>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras gravida lectus eu elit maximus rhoncus. Vivamus vitae enim in felis consequat efficitur a quis dui. Aenean id tristique dui, in finibus dui. Etiam ut nunc lobortis, tempor odio ut, ornare metus. Donec convallis tincidunt velit. Nullam ipsum est, condimentum quis nunc quis, sollicitudin condimentum orci. Nunc vehicula porttitor porttitor. Duis et augue vestibulum, iaculis eros vitae, lacinia urna.</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</div>
</body>
</html>

https://jsfiddle.net/xj408apo/

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

Item on the menu has been pushed lower in the list

There seems to be an issue with the layout of my menu as one item is displaying lower than the others without any clear reason. <html> <head> <title> My Website Homepage </title> </head> <body> ...

htmlcss

Achieving Equal Spacing Between Containers without Using Grid or Flexbox

I'm struggling to evenly space four child containers within a single parent container without using Flex/Grid, as I haven't covered those topics yet. I tried setting each child container to 25% width of the parent and centering them with text-ali ...

htmlcss

Can I position two div elements next to each other, with one div partially offscreen, without utilizing display none or setting its width to zero?

Is it possible to position one div outside of the screen width while setting two divs side by side? I am looking to insert DIV2 above DIV1 with animation without adjusting its width or display. The goal is for DIV2 to enter the screen from the side alread ...

htmlcssanimationscroll

Iterate through an HTML table and transfer matching items along with their corresponding calculated amounts to a separate table

<html> <body> <div> <table border="1" id="topTable"> <thead> <th>Item</th> <th>Sold</th> </thead> <tbody id="topTableBody"> <tr> ...

javascriptjqueryhtml

Learn the process of creating a unique item layout to suit your preferences

Exploring the use of div to create the desired layout but struggling to achieve my goal .skills-container { height:50px; /* aiming for around 50px */ padding:5px; } .skill-pic { width:48px; height:48px; } .skill-content { } .skill-content p { } .progres ...

htmlcss

What strategies can be used to accurately position a rotated image within a rotated div?

Below is the code snippet I am using: <div class="container"> <img class="img"/> <div class="underlay"></div> </div> The image is a picture of some rotated text by 10 degrees, although the ...

htmlcss

Avoiding overlap in CSS Grid layout with Internet Explorer 11

Creating a date picker component that utilizes a calendar styled with CSS grid has been successful, except in IE11 where all elements appear in the top left corner. Is there a specific CSS property for IE11 that could fix this, or is it simply not compatib ...

htmlcssinternet-explorer-11

"Optimize Magellan Sidebar for Mobile Devices by Relocating it to the Bottom of the Page

After spending a week working with Foundation 5 framework, I'm curious if there is a straightforward way to make my magellan sidebar shift to the bottom of the page when viewed on mobile or tablets. <div data-magellan-expedition="fixed"> <di ...

javascriptjqueryhtmlcsszurb-foundation

Is it possible for me to alter the script for my button's onclick

Is there a way to replicate all properties of a div when creating a clone using JavaScript code? I have an existing script that successfully creates a clone of a div when a button is pressed, but it does not copy the CSS properties. How can I ensure that t ...

javascriptjqueryhtmlcss

Say goodbye to tables and hello to CSS div layouts!

Is there a way to align three or four elements without relying on tables? I want them to follow this format: The reason I am asking is because my current method involves using tables, but they are not allowing me to set a specific height for the "test" bo ...

htmlcssalignmentcss-tables

The SimpleHTTPServer is causing Google Maps Places Autocomplete feature to malfunction

Currently, I am implementing a location search feature along with form auto-fill using the google.maps.places.Autocomplete functionality. While accessing the HTML file directly (file:///location.html), everything is functioning as expected. However, when ...

javascriptpythonhtmlgoogle-mapsgoogle-maps-api-3

What is the best way to make a table row stand out when clicked on in a Vuejs application

How can I make a table row highlight when clicked in Vuejs using '@click'? I'm currently facing difficulties in achieving this. Below is my html template where I'm applying the class 'active' to the Boolean 'isActive&apo ...

javascripthtmlvue.js

Is it possible to modify the content of an element with a click event in Angular/HTML?

How can I implement a feature in my mat-accordion using mat-expansion-panels where the text becomes underlined when the panels are clicked? I want the title to be underlined when the panels are open and for the underline to disappear when they are closed ...

htmlangulartypescriptangular-material

Innovative Tools for Interactive Sites and Dynamic Animations

I'm interested in developing interactive websites soon and I'm curious about the various technologies I can use to create an engaging web page. I know that HTML5 now supports drawing on a Canvas, even in 3D. Can you recommend any helpful tutoria ...

htmlhtml5-canvaswebglinteractive

Showing a text value from a Github Gist on a Hugo website

I seem to be struggling with a seemingly simple task and I can't figure out what I'm missing. Any assistance would be greatly appreciated. I am working on generating a static site using Hugo. On one of my pages, I want to implement a progress ba ...

javascripthtmlhugogist

Need help modifying a UseStatus to target an axios post response efficiently?

Hey there, back again with a head-scratcher I've been dealing with all day. Almost done with a contact form, just stuck on an animation concept that involves three steps: 1. Prompting the user to contact 2. Making the waiting process user-friendly ...

javascriptcssreactjsaxiosuse-state

Tips for displaying server data in a graph format

I am currently working on a project that involves using PHP: In this project, users will input their health data and upload it to the server, assuming the server is on a local host. My main question now is how can I effectively present this data to the u ...

phphtmlserver

tips for deleting spacing in the <pre> element

I need help with formatting my text within <pre></pre> tags. The issue I'm facing is that there is an indent on the first line and I want to remove it. Can someone assist me in modifying this code to achieve that? @foreach (v ...

htmlasp.net

Numerous CSS/JS Dropdown Menus

I am seeking the ability to implement a dropdown through CSS in various locations within my HTML prototype. This implies that I require the capability to position multiple dropdowns anywhere on the page. Currently, I utilize this method to generate a sing ...

javascripthtmlcss

Which Browser (or version) is the Only One That Cannot Manipulate Flash Objects?

In my attempts to modify Flash Objects / Embeds using Javascript, I've found that it works in all browsers except for IE. This has led me to consider abandoning IE altogether for this application, unless there are other older or less used browsers tha ...

javascriptjqueryhtmlinternet-explorerbrowser