I have a flex box with an image and text line inside. How can I adjust the width of the box and text to automatically match the size of the image?

Consider the code snippet below:

<style>
.img_box {
    display: flex;
}
</style>

<div class=img_box>
    <img src=img/>
    <div>Title text of varying length. It may exceed the image's width or be smaller.</div>
</div>

I am looking to be able to specify either a height or width value for the image and have the box adjust accordingly to match the image's width (excluding padding). The text should wrap and not impact the box's width, which should solely be determined by the image.

The box's height can change based on wrapped text, which is acceptable.

Answer №1

To achieve the desired layout for your images, you can utilize the existing display: flex property in your .img_box class. Simply add flex-direction: column and width: min-content, then specify the image width using width.

.img_box {
    display: flex;
    flex-direction: column; 
    width: min-content;
}

.img_box img {
    width: 200px;
}

.img_box div {
    text-align: justify;
}
<div class="img_box">
    <img src="https://randomuser.me/api/portraits/lego/1.jpg" alt="Test Image">
    <div>Title text of some variable length. Can sometimes be wider than the image, sometimes smaller</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

Click on link after animation has finished

I'm currently facing an issue with my script not functioning correctly. The code I'm utilizing is from a resource provided by Codyhouse to implement a 3D rotating navigation menu on my webpage. Essentially, when you click the hamburger icon, it o ...

I am interested in implementing a variable to define rows within a <tr> element in an HTML table

I am facing an issue with finding specific rows in a table by using a variable like /tr[i]/ where i represents the row I want to access. When I hardcode the element in my code, it works perfectly: driver.find_element_by_xpath("//tbody[@class='sample& ...

Massive HTML Table Containing Rows upon Rows

Currently, I have a server that can provide me with a list of objects in json format, and my goal is to showcase them in a table on the client side. Initially, I thought about dynamically modifying the DOM after receiving data from the server. Building th ...

Displaying truncated title text

Would it be feasible to display clipped text (overflow: hidden) in a way that is fully readable when hovered over? An attempt like this: div:hover { overflow: visible; background-color: yellow; } results in the text overlapping, making it impossible ...

Ensuring IconButton is perfectly aligned with Text in one straight line

I want to display IconButtons alongside plain text in a single block of text, but the result didn't turn out as I had hoped. Here is what I attempted: JS(ReactJS): <div> <span> <h3>Title</h3> <IconButton className ...

Difficulty Aligning Header Elements - Combining Navigation and Logo on the Same Line

I am currently facing an issue with positioning a logo and navigation links within a <header> element. When I apply the CSS property text-align:center;, the logo aligns to the center on one line while the navigation links appear on another line direc ...

HTML integration of JavaScript not working as expected

My experience with separating files in HTML and JS has been positive - everything works smoothly when I link the JS file to the HTML. However, an issue arises when I decide to include the JS code directly within <script> tags in the HTML itself. The ...

How to specifically exclude a checkbox from the "select all" function in J

One way to select all checkboxes with HTML code: Select All <input type="checkbox" name='select_all' id='select_all' value='1'/> To achieve this with Javascript code: <script type="text/javascript> $(&apos ...

Encountering a peculiar problem with the Bootstrap Carousel where the first slide fails to load

There seems to be an issue with the bootstrap carousel where the first slide appears empty initially, but once you slide to the second slide it starts working fine. Navigating through all slides is still possible. <div id="mediakit_carousel" class="car ...

Ways to Adjust Website Scaling for Varying Screen Sizes

Is there a way to adjust my website's scale based on the device width, such as changing it to 0.7 for certain devices? The only information I've found so far is using the <meta> tag: <meta name="viewport" content="width=device-width, i ...

I am having trouble creating a modal box for my gallery images

I'm currently working on a PHP dynamic site and I've encountered an issue with my gallery code. For some reason, the modal box is not showing up when I click on the gallery images. Can anyone please assist me in resolving this problem? var mod ...

text box with an immobile header

As the browser window size decreases, the layout changes. However, when scrolling down, the search text box moves up and is no longer visible due to its lack of fixation. How can I make the search text box stay fixed as I scroll down? I tried implementing ...

The ng-route feature seems to be malfunctioning and I am unable to identify the error, as no information is being displayed in the console

Here is the code in my boot.php file where I have set up the links <ul class="nav nav-pills nav-stacked"> <li role="presentation"><a href="#/valley">Valley</a></li> <li role="presentation"><a href="#/beach"> ...

Angular 2: Emptying input field value on click event

I am experiencing an issue with resetting my input values. I have a search bar with filter functions. When I enter a value, it displays a list below and I want to add a function to these links. When I click on one of them, it takes me to another component ...

Unusual shadow cast by the box's silhouette

I am currently facing an issue with a box and its shadow. When I close the box, a different shadow lingers behind. I have tried troubleshooting this problem but cannot pinpoint the source. I have included the relevant code files in the specified folders. I ...

Why is my HTML5 class unable to locate the contents of my observable array?

Any help would be greatly appreciated. I've been coding for over fifty years, but I'm relatively new to JavaScript, HTML, and knockout. This project seems promising if I can just get it to function correctly. What follows is one of the many appro ...

DIV size issue resolved

Content within a div is surpassing the set fixed size determined by CSS. <style> #fixeddiv { position: fixed; margin: auto; max-height: 300px; max-width: 700px; } </style> <div id="fixeddiv"> <div id="M77 ...

Tips for deleting all content within a designated html tag (including the tag itself)

Imagine you are dealing with a string like this: text = """<p>Bla bla bla.</p><p>Blo blo blo<a href="http://www.example.com">bli bli</a>.</p><p>blu blu<br> <span style="font-size: x-small;"><br> ...

What is the best way to dynamically add getJSON's data to a div whenever the loadmore button is clicked?

When a page loads, my getJSON function displays its output in a div called myDiv. Now, I am looking to add a button at the bottom of the page. When the user clicks this button, I want to trigger another call to getJSON. Each time the button is clicked, I ...

Customizing the appearance of jQuery accordion components

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js" language="javascript"></script> <script type="text/javascript" src="http://www.compactcourse.com/js/accordionNew.js" language="javascript"></script> < ...