Embedding text within an image and adjusting its size simultaneously

My goal is to include a paragraph within an image, but the text keeps overflowing beyond the boundaries.

I would like the image to resize proportionally to accommodate the length of the paragraph.

Despite attempting to use the min-height property, I have not been successful in achieving the desired result.

.image-container{
  position: relative;
  min-height:100vh;
  width: 100%;
  justify-content:center;
  align-items:center;
  display:flex;
}

.truck-image{
  position: relative;
  top:50px;
  object-fit: cover;
  width:100%;
  height:100%;
}

.text-container{
  position: absolute;
  top:110px;
  left:0;
  padding-left: 100px;
  width:30%;
  color:white;
  z-index:3;
}

I had expected that using the min-height property would automatically adjust the container's size based on screen size changes, thereby resizing the image accordingly. Unfortunately, this has not been the case.

Answer №1

Consider approaching the situation from a different angle.

In this case, the text should determine the height of the parent element, so setting it to absolute won't be effective.

One solution is to use the image as a background-image for the parent element and ensure that the parent adjusts its size based on the text content. This way, the image with the specified size will automatically fill the necessary space.

Below is a basic example using the provided CSS:

.image-container {
  position: relative;
  min-height: 100vh;
  width: 100%;
  justify-content: center;
  align-items: center;
  display: flex;
  background-image: url(https://picsum.photos/id/1016/1024/768);
  background-size: cover;
}

.text-container {
  position: relative;
  top: 110px;
  left: 0;
  padding-left: 100px;
  width: 30%;
  color: white;
  z-index: 3;
}
<div class="image-container">
  <div class="text-container">a line of text<br>a line of text<br>a line of text... (content continues)
  </div>
</div>

Answer №2

Ever experimented with using height: fit-content;? It's a nifty way to have the height of an element adjust automatically based on its content. A similar approach can be taken with adjusting the width as well. Check out this link for more information.

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

Refresh div content dynamically with anchor tag in place

I have a dilemma with the following div that contains an anchor tag linking to a php script responsible for updating information in a database and returning to this page. My goal is to execute this php script by clicking on the anchor tag, update the datab ...

Creating an XML response to generate an HTML dropdown menu in PHP

My onChange function in javascript calls a PHP file to fetch UPS rates and update an HTML dropdown list. Everything was working fine until I needed to add an item to the options list based on a comparison. Javascript: function fetch_UPS(el){ var zip = ...

Is it necessary for nested Bootstrap 3 rows to be enclosed within a col-sm-*?

Is it necessary for nested Bootstrap 3 rows to be within a col-sm-* or can they also be nested within a col-md-, col-xs-, etc? The documentation specifies col-sm-* but does not clearly state if nesting within other col sizes is not allowed. http://getboo ...

The margin-right and margin-left properties function differently when it comes to dealing with overflow of floated divs

<body> <div class="content"> <div class="content-sidebar"> content-sidebar </div> <div class="content-main"> content-main </div> ...

Start the CSS3 animation in reverse right away

I am trying to achieve a "flashing" effect by adding the .shown class to my #overlay, causing the opacity to fade in for 2 seconds and then immediately reverse, fading out for another 2 seconds. After experimenting with removing the class, I found that it ...

Utilizing MUI for layering components vertically: A step-by-step guide

I am looking for a way to style a div differently on Desktop and Mobile devices: ------------------------------------------------------------------ | (icon) | (content) |(button here)| ----------------------------------------- ...

The functionality of DataTables is not supported on Internet Explorer versions 8 and below

My current setup involves using DataTables to present data in a tabular format with pagination and sorting functionalities. While this is working smoothly across all browsers, I have encountered an issue specifically in IE versions 8 and below. According t ...

How can I make JavaScript skip over a specific portion of my HTML code?

I have a script running on all pages of my website. I would like it to continue running on the specific page, but ignore a certain section. For example: <p>process with javascript</p> <p>skip, instruct javascript function to ignore</ ...

Using more than one class at a time is causing issues

Essentially, I have a div and I want to create an exercise where I apply three different classes using vue.js. I attempted to use v-bind:class, specifically :class, but can I bind a class directly from CSS? This is what I tried: html <div :style="[my ...

A step-by-step guide to alphabetically sorting items in an auto-complete drop-down menu using AngularJS

<div class="custom-dropdown" name="pSelect" id="pSelect" ng-model="selectedP" ng-trim="false" ng-options="p as p.name for p in data"></div> This unique dropdown menu was created using AngularJS with data sourced from a JSON object. ...

Ways to prevent my website from being accessed through the Uc Browser

Is there a way to prevent my website from functioning on UC Browser using HTML or JavaScript? ...

Having issues with the functionality of Bootstrap 4 popover?

In my Spring MVC web project, a Bootstrap popover appears when the help icon is clicked. However, on the first click, the popover opens and moves away from the icon. After closing it and clicking again, the popover correctly positions itself. When I chan ...

Is there a way for me to send a form containing pre-existing data from a different page?

Seeking advice: I realize that utilizing jQuery's ajax function may be the simplest approach, however I am facing an issue with the form field names. The var_dump below displays the typical values submitted by the form using test data. It appears that ...

Expand Bootstrap navbar search box outside collapse menu

Currently, I am working on designing a navigation bar that showcases my brand on the left side, a full-width search bar in the center, and additional pages on the right. I am facing challenges in maintaining the full-width of the search bar without causing ...

Tips for constraining elements to set heights according to content in "stepped" increments

Is there a way to have "step-based heights" on a div? I created a small example to illustrate my question. My goal is to make sure that each box has a height that is a multiple of 400px. For instance, if a box with height: auto; is 345px, it should displa ...

Neglecting to include an external CSS file within a .aspx content page in an ASP.NET WebForms application

I've been facing some challenges while trying to incorporate an external CSS file into the content pages of my asp.net WebForms application. The content pages have a master page (Site.Master) which includes the following code in the head section: < ...

Creating dynamic PDFs from HTML templates and generating table of contents using Java

Our latest project involves using an editor to create templates for catalogs specifically for design purposes. The process begins with designing a template in the editor and adding data in that specific format. Once the template is completed, it is convert ...

Is it possible to save the current state of an execution in JavaScript and pick up where you left off

Is there a way to accomplish this task? I am interested in developing a JavaScript application that has the ability to "pause" and then "resume" execution from a specific point, similar to a checkpoint system. For example: //code.js var abc = 13; checkpoi ...

Click the button to add content to the top section of the div using jQuery

Looking for some assistance with a web development issue I'm facing. Here's the scenario: I have two sections on my webpage - TOP and BOTTOM. In the bottom section, there are 3 list records each with a checkbox and button. What I need help with ...

Develop a distinctive JavaScript solution that enables an image to appear in fullscreen upon loading the page, and then smoothly fade away after precisely

I have been trying to incorporate a feature on my Shopify frontage website where our logo appears fullscreen and then fades away or disappears after a few seconds, allowing people to access the rest of the website. However, I am facing difficulty in making ...