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

How can one manage styling choices in R Markdown while creating a PDF document?

Currently, I am utilizing R Markdown within the RStudio platform to produce documentation. When selecting the "Knit HTML" option, my output appears satisfactory. The ability to modify styling options and apply CSS Files directly is a beneficial feature. ...

What is the best way to design a trapezoid-shaped div with perfectly centered text?

I'm currently attempting to design a div element that resembles a trapezoid and would like to position text in its center. So far, I have successfully created a div with the top border shaped like a trapezoid. However, the text is centered within the ...

margin around the masterpage

Currently, I am utilizing a master page in ASP.NET (using Visual Studio Express 2015) and overall everything is functioning properly. However, there seems to be an unsightly space around the edges when viewing it in a browser. While not a critical issue, ...

What is the best way to align a drop-down menu within my DIV container?

Here is the code snippet I am working with: <div id="one"> <a href="#" id="test1" > <button title="test1">test1</button> </a> <a href="#" id="test1" > <button title="test1">test1</button> &l ...

Seeking guidance on utilizing JavaScript for implementing an onclick event

I am exploring the realm of Event tracking with Google Analytics. To make this happen, I know that I must include an onclick attribute to select links (those specifically requested for tracking) in the following manner: <a href="http://www.example.com" ...

Error encountered while pressing key on vscode led to failure in requesting textDocument/documentLink

Greetings! I'm currently using VSCode on both my mac and Windows 10 machines. Recently, they have both started experiencing the same issue after a recent update/rollback. Every few keystrokes, the output box pops up with the "HTML Language Server" se ...

Adaptable background images with CSS styling

I'm attempting to adjust the sizing of my background image on the splash page to make it smaller. My goal is for the image to fill the entire section regardless of screen size. .splash{ background-image: url("../images/lanternboys_medium.jpg"); backg ...

Ensure that the div elements fully occupy the remaining space within the box

I'm looking to bring this idea to life: https://i.sstatic.net/SWytj.png Most of my work is complete, but I need the boxes to fill up all available space in the row. This is the HTML code I've used with Bootstrap. How can I achieve this? < ...

Troubleshooting problem with Bootstrap navbar collapsing when certain items are not collapsed

I am currently working on creating a Bootstrap menu for a website that has certain items that should not collapse on extra-small screens. While I have made progress in implementing this feature, I have encountered an issue. When the screen size is extra-s ...

Troubleshooting problem with Laravel and Vue integration

I have experience working on a Laravel and Vue.js project. Here is the code snippet for the Laravel view: @extends('layouts/app') @section('content') <div id="app"> </div> @endsection And here is the ...

react-full-page is causing my webpage to not open in a specific ID location, such as http://localhost:3000/#someIdWhereIWantThePageToBeOpened

I'm currently utilizing the react-full-page package and while it's almost working well, I've come across two issues: After clicking on an anchor link like <a href='#someId'>Go There</a>, the scroll goes to the designat ...

Solutions for concealing the current div when clicking on a new div that reveals a fresh one

Is there a way to hide the current div once you click on a new div that reveals another one? The code below toggles the display of the div, but what I am attempting to achieve is that when you click on a new item after clicking on the first one, the first ...

The code snippet for the carousel in Bootstrap does not function correctly in VSCode, yet it operates effectively on codeply.com

code: <div class = "carousel-inner"> <div class = "carousel-item active" style = "background-color:red" > <h2>I don't have to sniff other dogs anymore for love. Thanks to TinDog, ...

Ways to retrieve dropdown values

My HTML code is as follows: <select class="height_selected"> <option>Select Height</option> <option ng-model="userHeight" ng-init="1" value="1">123 cm</option> <option ng-model="userHeight" ng-init="2" v ...

Opening an HTML file in Eclipse is a simple process that can be

Q1) Is there a way to open this file in a browser for testing? Q2) Can I quickly open this in Chrome from Eclipse and test it? click here for image ...

Navigating Maps in a PhoneGap iOS App

Regarding the issue mentioned in this link I am attempting to find a specific location on the native iOS map using the URL below: window.location = "maps:Greensboro+NC" However, it opens the map at my current location instead of the specified location. ...

What sets apart using the loadText function from loadText() in JavaScript?

I've implemented a basic JS function that loads text lines into an unordered list. Javascript function loadText() { document.getElementById("text1").innerHTML = "Line 1"; document.getElementById("text2").innerHTML = "Line 2"; document.ge ...

Best placement for transition effects in a dropdown menu animation

<div class="dropdown"> <button class="dropbtn">ALAT</button> <div class="dropdown-content"> <a href="index2.php"><img src="home.jpg" class="home" width="7 ...

What could be causing such a significant impact on the row height in a CSS table when a tiny image is inserted next to an input box?

Currently, I am facing a unique challenge while setting up a form using CSS tables. The issue is best explained through a fiddle: http://jsfiddle.net/GdgV4/6/ In the third row, you'll notice that adding an image with a height less than the input box ...

The CSS code for ::before is not functioning properly

Trying to enhance the style in Ionic2, I have a message box: I am attempting to integrate this image into it: To create a seamless look with the message box. Facing an issue where the image is not being applied at all. The CSS code I am using specifies ...