Arrange Image on Top of Text in Div with Text Controlling Div Height

I'm looking to stack an image on top of text inside a fixed height div. The challenge is to make the image's size based on the amount of space left after accommodating the text within the same area. Ideally, I would like to achieve this using only CSS without involving JavaScript.

Here are more specific details regarding the requirement:

If the text spans three lines, then the image should have a max-width: 100% and a maximum height that does not exceed the remaining space in the div after accounting for the height of the text. For example, if the parent div has a height of 750px and the text requires 100px of space, the image should be allowed to be at most 650px tall.

I've attempted to use flexbox properties like flex-column but struggled to confine the size of the image accordingly. When I tried stacking two divs where the top one was scaling with the text but encountered issues when adding the image.

My question is whether achieving this layout is feasible using only CSS.

To illustrate what I currently have and the functionality issue, you can view the example here: https://jsfiddle.net/aoqerm06/

<div style="height: 400px;" class="d-flex flex-column">
    <div class="bg-primary h-100" >
        IMAGE GOES HERE
    </div>
    <div class="flex-grow-1">
        LOTS OF TEXT HERE
    </div>
</div>
cssbootstrap-4

Answer №1

Here is a solution that might meet your requirements. By wrapping the content in a div with a background image, you can have better control over its styling:

.custom-container {
  display: flex;
}
.box {
  display: flex;
  flex-direction: column;
  padding: 10px;
  height: 450px;
  width: 300px;
  background-color: #f2f2f2;
  margin-right: 15px;
}

.text-content {
  
}

.image {
  display: inline-block;
  height: 100%;
  width: 100%;
  background-image: url('https://source.unsplash.com/random');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
<div class="custom-container">
  <div class="box">
    <div class="text-content">
      <p>Your text goes here. Your text goes here. Your text goes here.</p>
    </div>
    <div class="image"></div>
  </div>
  
  <div class="box">
    <div class="image"></div>
    <div class="text-content">
      <p>More text goes here. More text goes here. More text goes here.</p>
    </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

What is the best way to ensure the font size is responsive in Laravel's welcome.blaze.php file?

On a large screen, the word "LaravelProject" and its links have ample space which I prefer. https://i.sstatic.net/AcnQ3.png A newly created Laravel project appears differently on a small screen. https://i.sstatic.net/O4fBq.j ...

cssvue.jsbootstrap-4

Ways to align text in the middle and shift it downward?

I'm currently attempting to center the bottom navigation bar using the following CSS code: #main-nav { margin-left: auto; margin-right: auto;} Unfortunately, this method is not achieving the desired result. I even tried adding <center></cen ...

htmlcssalignmentblockcenter

Adjustable pseudo-elements derived from the size of the element

I have a unique feature in my web application that involves a span element with inner text and additional :before and :after pseudo-elements used as decorative lines on each side of the text. Check out this JSFiddle example to see exactly what I mean. .c ...

jqueryhtmlcsscss-selectorspseudo-element

How come the Bootstrap 4 column is not utilizing its entire available width?

My webpage is structured as follows: <div class="container"> <div class="row mb-5"> <div class="col-12 col-md-3"> <img class="mr-5 img-fluid" src="big_icon_1.png" alt="Big icon 1"> </div> <div class-"co ...

htmlcssbootstrap-4

Find the maximum width of an element within a Div that is larger than the widths of the other three elements using jQuery

After implementing a Dialog using JqueryUI, I noticed that inside the dialog there is a <div>. Within this <div>, there are three <button> elements labeled "Delete", "Cancel", and "Ok". Interestingly, the widths of these elements are auto ...

javascriptjquerycssjquery-ui

What is the best way to verify all the UL elements within a hierarchy of checkboxes

Query: In my category listings, some categories have children. I am attempting to implement an "ALL" category that, when selected, will automatically check all sibling checkboxes in the same category. For example, clicking on ALL under the MUSIC category ...

jqueryhtmlcss

Interactive jQuery Dropdown Menu with Multiple Divs

I have been working on this and I'm almost there, but the jQuery part is driving me crazy (I'm not very proficient in it yet, but I am learning). Here's the link to the fiddle: http://jsfiddle.net/5CRA5/4/ Since I can't demonstrate th ...

jquerycss

Tips for modifying the font style of a Bootstrap form input using a custom font

While developing my website using Bootstrap 4, I encountered an issue with the custom font (GeosansLight) I applied to the entire website through the body's CSS attribute. The problem arose when the default Bootstrap form inputs appeared too light to ...

csshtmlbootstrap-4

Using Flexbox and Bootstrap 5 to create a responsive design with Aspect Ratio

This snippet of code showcases a unique two-column layout, utilizing both bootstrap and flexbox. The left column is dedicated to displaying video descriptions, while the right column houses the embedded video. <div class="d-flex flex-row flex-wrap& ...

htmlcsstwitter-bootstrapflexboxbootstrap-5

Implement a delay for updating the style of a button by using the setTimeout function

Is it possible to create a button that, when clicked, changes color to green and then reverts back to its original style after 3 seconds? I am able to change the button color using an onClick event in my script. However, I encounter scope errors when tryi ...

javascripthtmlcss

Setting the line-height property in CSS to a value greater than the font-size property

Dealing with a frustrating issue where I want to align the top of an image with text, but the letters end up slightly below the line height. Check out this simple example featuring a classic movie: HTML: <img src="http://cf2.imgobject.com/t/p/w92/wcI ...

htmlstylescsstext-size

The color of Bootstrap 4 badge remains constant and cannot be altered

My current project involves utilizing bootstrap 4, and I needed to create a badge with a blue color scheme. To achieve this, I included the following code: <td><a href="patient_history.php?pid=<?php echo $patient['patient_id']; ?> ...

twitter-bootstrapbootstrap-4

Switching the image on click of an option tag

I'm looking to create a dynamic image changing feature using two select tags in my HTML. One select tag is for the model and the other is for the color. When a user selects a model from the first dropdown, I want the image to change to reflect that mo ...

phpjqueryhtmlcssimage

Text using Bootstrap positioned to the right of the breadcrumb navigation bar

Currently, I am using the default theme with Bootstrap 3. I have implemented breadcrumbs as shown below: <ol class="breadcrumb"> <li><a href="#">Home</a></li> <li><a href="#">Library</a></li> < ...

csstwitter-bootstrap-3

When left clicking, jQuery will load, but hovering or middle/right clicking will behave like a normal <a> element

I am familiar with creating buttons that trigger jQuery load functions, as well as with the standard HTML a element. However, I am unsure how to merge these two concepts to create a link that behaves differently based on the type of click it receives. Spe ...

phpjquerybootstrap-4

Maximizing the width of an absolute div element inside a container

Looking at this demo, you'll notice that the header remains fixed. However, my issue lies in getting the absolute <div> inside the <th> to occupy 100% of the width of the <th> When I set width: 100% for the <div>, it expands t ...

htmlcssfixed-header-tables

CSS alert problem encountered

I have an HTML and CSS notification template that I would like to incorporate into my PHP code. You can view the template here. HTML <div class="alert-box error"><span>error: </span>Write your error message here.</div> &l ...

phphtmlcss

Incorporating a React Bootstrap spinner into your project

I am looking to enhance my modal by adding a spinner to it. Here is the current structure of my modal: <Modal show={modal.show} onHide={onHideModal}> <form onSubmit={onImport}> <Modal.Header closeButton> <Mo ...

reactjstypescriptbootstrap-4spinnerreact-bootstrap

"Troubleshooting problems with jQuery accordion collapse and styling using CSS

I'm currently dealing with an issue regarding my accordion design. I have customized the stylesheet using themeroller, but when I collapse one of the sections, the header changes to black instead of reverting back to its original red color. I've ...

jquerycssaccordion

Aligning input fields vertically and horizontally within a div container

Struggling with this frustrating piece of code for hours now. I've lost nearly 2 hours trying to get it to work properly. My goal is to center an input field vertically and horizontally inside a horizontal bar. Take a look at the simplified code belo ...

htmlcssvertical-alignment