Is it possible to automatically resize my text below an image using only HTML and CSS?

I need my text wrapper width to automatically shrink below an image.

For instance:

<figure>
    <img src="mypicture.jpg" />
    <figcaption>
        This is a lengthy description. This is a lengthy description. This is a lengthy description.
    </figcaption>
</figure>

Currently, I want to include a border around both the img and figcaption elements, as my images have varying widths. I would like the width of the figcaption to adjust automatically to match the image's width. For example, if an image has a width of 100px, then the figcaption should also be 100px.

Can anyone advise me on whether this can be achieved using only HTML and CSS, without JavaScript?

htmlcss

Answer №1

Implementing a few hacks is essential. Adjust the display property of the container to table and assign it a narrow width. This will automatically center its content width (similar to a table).

Take a look at this demonstration

Answer №2

image {
    show: table;
}
.content figure description {
    show: table-caption;
    label-side: underneath;
}

This achieves goals. @Chris Lee's response is accurate when I designate the static image using css. In my case, I prefer not to define the width of each image individually since there are many and their widths vary.

The above css works well for my needs.

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 serve React.js files using express and the .sendFile method?

I have been developing with create-react-app. Upon navigating to localhost:3001/test, the HTML is indeed being served. However, only a blank page is displayed because nothing within the id "root" is being rendered. The server code I am using looks like t ...

htmlreactjsexpress

Is it possible to use CSS to create a gap between the cursor and the placeholder text within an input field?

Could you please assist me with a bug I have encountered on an older version of Firefox for OSX (37.0.2)? I have included a screenshot of the issue here: https://i.sstatic.net/dzK0G.png Is there a way to use css to move the first character of the placehol ...

javascriptjqueryhtmlcssangularjs

Adjust the viewport to fit the width of the screen and display large images

Currently, I am experimenting with using a WebView to display a large image while incorporating multitouch functionality to prevent memory crashes. My webView is configured as follows: setInitialScale(20); WebSettings settings = getSettings(); ...

javaandroidhtmlwebview

When the document is shifted by an angular function call, the mouseup event fails to trigger

My problem involves an angular function that alters the ng-if state to display the sidebar when the image is clicked. However, upon calling the function and shifting the entire webpage, the mouseup event for the image no longer triggers when I release th ...

javascripthtmlangularjs

Steps to incorporating personalized HTML into a Mechanize page object

Is it feasible to insert custom HTML code into a Mechanize page object? The purpose is to circumvent the need for javascript code that generates a form, by incorporating the HTML produced by the javascript code into the mechanize page object fetched usin ...

javascripthtmlrubynokogirimechanize

Unusual mobile chrome behavior and erratic modal functionality

It has come to my attention that mobile users on Chrome/Android are experiencing some unusual behavior with modals. The autofocus feature is not working as expected, and the view keeps scrolling to the bottom. This issue specifically occurs with modals th ...

javascriptcssvue.jstailwind-cssheadless-ui

Discover how to use jQuery to locate and substitute a class of an element

I'm currently facing a limitation on the platform I'm using, as it restricts me from making HTML changes. To work around this constraint, I have to utilize JQuery to locate and swap one div with another (or in simpler terms, find specific text in ...

javascriptjqueryhtml

Ways to enhance the appearance of this button arrangement

Having trouble setting an image as the button and getting rid of the lines in-between the buttons. Any assistance would be greatly appreciated. Thank you. All names, links, and files used here are just for illustrative purposes. .button { width: 200p ...

htmlcss

Unable to transfer FORM data to PHP script

I had this functioning perfectly for a friend, but when he switched providers everything stopped working. Despite my numerous tests, the submit button should be passing data to the php file, but it seems like the php file is not receiving anything. Here i ...

phphtmlformscookies

Guide to creating a clickable inline svg in HTML/CSS for use with onclick event in JavaScript

I have a unique inline svg code snippet in my html: <svg id="nav-search-icon" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32.2 32.2"><path d="M19 0C11.8 0 6 5.8 6 13 ...

javascripthtmlcss

Creating an HTML table layout: A step-by-step guide

I am in need of assistance with designing an HTML layout. My goal is to display 3 columns for each table row as described below: Column #1 will contain text only. Column #2 will have an inner table, which may consist of 1 or 2 rows depending on the cont ...

htmlcss

Ensuring that the image perfectly fills the entire screen on an iPhone X using React Native

Looking for a solution to make my image fit the entire screen on the iPhone X simulator. I've tried adjusting the imageContainer width to "100%" and the container that encompasses everything, but haven't had any luck. Would appreciate any suggest ...

javascriptcssreactjsreact-native

Implementing user-driven filtering in a React table

When a user clicks on the submit button, data will be loaded. If no filter is applied, all data will be displayed. const submit = async (e: SyntheticEvent) => { e.preventDefault(); const param = { ...(certificateNo && ...

javascripthtmlreactjsapireact-hooks

Issue with distinguishing JavaScript code from an SVG file

Seeking assistance as I have an SVG file that is mostly composed of a script. My goal is to separate the script for compression purposes, but I am struggling to find a way to achieve this. Any guidance or help on this matter would be greatly appreciated. ...

javascripthtmlsvg

Core-pages with polymer core have no set height limit

I am embarking on my first project using Polymer. I have implemented core-pages to facilitate navigation between different pages. However, I am facing an issue where the pages are not displaying with a white background-color as intended in the css. You ca ...

htmlcsspolymer

Displaying dates on the Amcharts category axis for instances with empty data

I am currently creating a fruit consumption chart for each day, and so far everything is working correctly in the provided example. var chart = AmCharts.makeChart("chartdiv", { "type": "serial", "hideCredits": true, "fixedColumnWidth": '10px& ...

javascriptjqueryhtmlcssamcharts

What is the best way to ensure an input field and a button are aligned perfectly within the same div tag and of equal height?

During a recent HTML-CSS project, I encountered an issue where I struggled to ensure that two elements within a div tag were the same height. The elements in question were an input field and a button with an icon. Here is a snippet of the relevant HTML cod ...

htmlcssfrontend

Troubleshoot: Unable to Change CSS on Click Using Javascript/jQuery

Having trouble creating three different buttons that toggle between various images using the CSS display property? Check out my code on https://jsfiddle.net/agt559e8/. function USradarChange1() { //document.getElementById("usradar1").src="weather/curr ...

javascriptjqueryhtmlcss

How can I showcase Bootstrap cards horizontally within a razor foreach iteration?

I seem to be experiencing a mental block on how to arrange bootstrap cards in a horizontal layout using a for each loop. By default, they appear vertically. Below is my razor code: @foreach (var item in Model) { var imgUrl = Url.Content("~/Conte ...

htmlcssasp.net-mvctwitter-bootstrap

Instructions to only input numbers or leave the text field blank

Hey there! I have implemented a directive that allows only numbers in my text field: Here is the HTML code snippet: <form name="filtroForm"> <input id="idMatricula" type="text" class="form-control" ng-model="filtros.Matricula" maxlength="20" ...

javascripthtmlangularjsregex