Dimensions of image details

I am working on an article that includes an image with a description. The challenge is that the description should not exceed the width of the image, but since the image width varies, fixing the width with a class .article-image is not a viable solution.

article {
  width: 600px;
  margin: 0 auto;
}

.leadtext {
  font-weight: 600;
  margin-bottom: 10px;
}

.article-image {
  float: left;
  margin: 0 10px 10px 0;
}

.article-image img {
  display: inline-block;
}

.article-image>div {
  font-size: 0.8em;
  font-style: italic;
}
<article>
  <h1>Headline</h1>
  <div class="leadtext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua</div>
  <div>
    <div class="article-image">
      <img src="https://placehold.it/100x100">
      <div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr | &copy; author</div>
    </div>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
      takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
      et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</article>

http://codepen.io/DaFunkyAlex/pen/mWMVdz

htmlcss

Answer №1

Introducing the <figure> element with <figcaption>

If you want to add a caption to an image, you can do so by placing it within a <figure> tag and adding a <figcaption> tag. You can even include <p> tags within the caption. The <figure> element is great for structuring content. It can also be used to highlight code snippets within your content. 

/* To center the caption:
figure {
    display: inline-block;
}
figure img {
    vertical-align: top;
}
figure figcaption {
    text-align: center;
}*/
<figure>
  <img src="//i.sstatic.net/N7dX8.png" width="100px" height="100px" />
  <figcaption>An image of a dog with some Lorem Ipsum text</figcaption>
</figure>

Answer №2

While it may not be the most traditional approach, there is a pure CSS solution available that can be utilized. By using display:table, the width of the cells can be calculated dynamically.

The beauty of this solution is that it allows for the image to have a dynamic size, while ensuring that the caption will only grow to the size of the image and will wrap onto new lines if needed.

To implement this solution, simply add the following CSS properties:

.article-image: display:table;
.article-image > div: display: table-caption; and caption-side: bottom;

article {
  width: 600px;
  margin: 0 auto;
}

.leadtext {
  font-weight: 600;
  margin-bottom: 10px;
}
.article-image {
  float: left;
  margin: 0 10px 10px 0;
  display: table;
}

.article-image img {
  display: inline-block;
}

.article-image > div {
  font-size: 0.8em;
  font-style: italic;
  display: table-caption;
  caption-side: bottom;
}
<article>
  <h1>Headline</h1>
  <div class="leadtext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua</div>
  <div>
    <div class="article-image">
      <img src="http://placehold.it/100x100">
      <div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr | &copy; author</div>
    </div>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</article>

Answer №3

Give this code a shot...

* {
  margin: 0;
  padding: 0;
}

* {
  box-sizing: border-box;
}

article {
  width: 600px;
  margin: 0 auto;
}

.leadtext {
  font-weight: 600;
  margin-bottom: 10px;
}

.article-image {
  float: left;
  margin: 0 10px 10px 0;
}

.article-image img {
  display: inline-block;
}

figcaption {
  text-align: center;
  font-size: 10px;
  word-wrap: break-word;
  max-width:140px;
}

.article-image>div {
  font-size: 0.8em;
  font-style: italic;
}
<article>
  <h1>Headline</h1>
  <div class="leadtext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua</div>
  <div>
    <figure class="article-image">
      <img src="http://placehold.it/140x140">
      <figcaption>Lorem ipsum dolor sit amet,consetetur sadipscing elitr | &copy; author</figcaption>
    </figure>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
      takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
      et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis ipsum, sed sit rerum aut cum ducimus odio dignissimos! Obcaecati quaerat, provident fugiat
      assumenda inventore dolore laudantium praesentium minima nulla aperiam! Ea nihil laudantium delectus eius iusto voluptatibus beatae pariatur, ducimus, ratione voluptatem. Unde perferendis laboriosam neque, soluta ducimus, maiores. Necessitatibus
      nihil, eaque harum temporibus qui autem earum beatae placeat numquam ab possimus dolores voluptatum fugiat expedita maxime consectetur est veniam esse minima odio saepe, doloremque dolorum repudiandae eum. Obcaecati possimus nostrum, eveniet culpa,
      ullam neque omnis adipisci magni consectetur esse accusantium suscipit amet repudiandae eos assumenda, iste blanditiis, aperiam aut!</p>
</article>

Answer №4

Latest Update

As per the solution provided by @Lars, setting display: table-caption on the caption element can resolve the issue without any assumptions.

Original Solution

In my view, there seems to be no direct way to achieve this without JavaScript involvement or making assumptions about the size of the content. Personally, I believe the most effective approach would be to estimate the number of lines in the description.

If you are aware of the number of lines the description will occupy, you can apply a fixed (using em units) padding to accommodate it. Additionally, use position: absolute on the description paragraph.

example with fixed 2 lines

.article-image {
  float: left;
  position: relative;
  margin-right: 10px;
  font-size: 0.8em;
  font-style: italic;
  padding-bottom: 2em;  
}

.article-image > div {
  position: absolute;
  bottom: 0;
}

This approach may not be suitable for narrow images as the description could become too narrow and span multiple lines. However, it may not be necessary to have one word per line in the description.

Answer №5

One issue is that the div element does not have knowledge of the image width. However, you can use a simple JavaScript calculation to solve this problem:

var divs = document.querySelectorAll('.article-image');
for(i = 0;i<divs.length;i++) {
  var imgW = divs[i].querySelector('img').width;
  divs[i].querySelector('div').style.width = imgW+'px';
}

Click here for a working example

Answer №6

Unfortunately, achieving this solely through CSS is not feasible without a defined image size. One possible solution involves incorporating a bit of JavaScript:

var images = document.querySelectorAll(".image-container"),
    i = 0, ii = images.length;
for(i; i<ii; i++){
  images[i].style.width = images[i].querySelector("img").clientWidth + "px";
}

http://example.com/sample

Answer №7

One option is to utilize the img tag within CSS

article {
  width: 600px;
  margin: 0 auto;
}
img{
  width: 350px;
}

.leadtext {
  font-weight: 600;
  margin-bottom: 10px;
}
.article-image {
  float: left;
  margin: 0 10px 10px 0;
}

.article-image img {
  display: inline-block;
}

.article-image > div {
  font-size: 0.8em;
  font-style: italic;
}
<article>
  <h1>Headline</h1>
  <div class="leadtext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua</div>
  <div>
    <div class="article-image">
      <img src="http://placehold.it/100x100">
      <div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr | &copy; author</div>
    </div>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</article>

Answer №8

To effectively adjust the layout, make sure to specify the width within the div container.

.article-image {
  width: 100px;
  float: left;
  margin: 0 10px 10px 0;
}

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

The issue with grunt-contrib-compass not functioning properly within npm

I recently installed npm and grunt, followed by installing grunt-contrib-compass. However, when I try to run grunt, I encounter the following error: Running “compass:dist” (compass) task Warning: not found: compass Use –force to continue. Aborted du ...

csssassnpmgruntjscompass

Tips for capitalizing the first letter of a directory

I want to automatically convert all directories in the URI to lowercase if the user types them in uppercase. For example, https://example.com/hOmE should be converted to https://example.com/home. ...

html.htaccess

Allow users to edit the textarea only to input values, not from

I am trying to achieve a specific functionality with two input fields and one textarea. Whenever I type something in the input fields, their values are automatically populated in the textarea using .val(). Currently, this feature is working as intended, b ...

javascriptjqueryhtmlinputtextarea

Accessing a JSON value in SCSS for localization

I have a JSON file containing all the values that I want to use for internalization in my app. On the HTML side, I am able to retrieve the values, but on the CSS side, I am using a "before" pseudo-element. In my HTML, I am using the class "menu-input" li ...

cssangular

Attempting to create an auto-suggestion tool that can process and accept multiple input values, filtering out only those that begin with a designated character

I've been working on implementing an auto-suggestion feature that displays suggestions with partial matches or values within the input box. The goal is for it to only provide suggestions that begin with a specific character, like the "@" symbol. Fo ...

javascriptjqueryhtml

Halt hovering effect after a set duration using CSS or Vanilla JavaScript

Looking for a way to create a hover effect that lasts for a specific duration before stopping. I want the background to appear for just 1 second, even if the mouse remains hovering. Preferably using CSS or JavaScript only, without jQuery. To see my curren ...

javascriptcsshover

Troubleshooting ASP.NET Content Page Error: jQuery Object Expected

Currently working on designing a personal ASP.NET Web page, I have encountered an issue with making a sticky div using jQuery. Despite all my other jQuery functions functioning properly, the sticky div seems to be causing trouble. stickydiv.js $(document ...

javascriptjqueryhtmlasp.netcss

Setting a default value dynamically in a `select` control can be done by using JavaScript to

Upon subscribing to the HTTP server for data retrieval, my select control in Angular framework gets loaded with the received data. My objective is to set a default value that comprises three values from the server object separated by slashes ("/"), which r ...

htmlangulartypescripthtml-selectangular-reactive-forms

Clicking on a button in HTML to open a JavaScript file

As a beginner in HTML and JavaScript, I am looking for a way to open a JavaScript file when the onclick event of a button in my HTML file is triggered. Can anyone provide me with guidance on how to achieve this? Thank you in advance. ...

javascripthtmlonclickbuttonclick

Using mousedown, mousemove, and mouseup to handle touch events in vanilla JavaScript instead of jQuery

Can someone guide me on how to set up a touch event handler in JavaScript using the mousedown, mousemove, and mouseup events? I would really appreciate any suggestions or tips! ...

javascripthtmlcss

Placing additional text beside a nicely aligned box

I am struggling to figure out how to position text in the center left of a box that is located in the top right corner of my HTML template. <table class="label"> <tr> <td class="sign">F</td> ...

htmlcss

The input and label are not experiencing any overflow

I've been following a tutorial to create an animation on an input and label. I successfully did it once today in school, but for some reason, it's not working now. My objective is to have the label inside the "input" field, with the input taking ...

htmlcss

Achieving a responsive card layout in Reactjs with Bootstrap by displaying four cards in a single row

const DisplayCategory = () => { const history = useHistory(); useEffect(() => { axios.get('http://localhost:8080/products', { headers: { Authorization: "Bearer " + localStorage.getItem("token&q ...

htmlcssreactjs

Searching for text in a Python Selenium input field and retrieving suggested values can be achieved by using certain methods and commands

When you type a term like "apple" into the search bar on , a dropdown menu with search suggestions appears. https://i.sstatic.net/pGxzt.png I am attempting to retrieve a list, dictionary, or dataframe of the values in that dropdown box. For example: { ...

pythonhtmlcssselenium

RAZOR - Strip image elements from variable with HTML content

In the code snippet below, I am using a helper to display content: @Html.Raw(Model.PageData.PageContent) My goal is to filter out any image tags that may be present. I have explored methods like .substring(), but they require specific indices or string n ...

javascripthtmlcssasp.net-mvcrazor

What is the best way to send a variable to a URL when a link is clicked?

Recently, I started learning PHP and ran into a challenge while working on a school project. The specific issue that I'm facing is how to pass variables to a URL when a link is clicked. Essentially, my problem involves a dropdown menu displaying diffe ...

phpjqueryhtml

Utilization of z-index with float: left within an image gallery in CSS

Currently, I am working on an image gallery that has content generated randomly. In terms of CSS, the images are positioned using the following code: .item { width: 200px; margin: 10px; float: left; } To add some functionality, I have implemented ...

jqueryhtmlcsscss-floatz-index

Delivering a Captivating JavaScript Pop-Up upon Page Loading

I have a simple pop up window (with no content) that triggers with the 'onclick' event. How can I modify the code below to make the popup appear automatically when the page loads? <head> <title>Popup Display</title> < ...

javascriptjqueryhtmlpopuppopupwindow

Show a stylish container when the server encounters an HTTP error with status code 500

My approach for error handling involves a straightforward ErrorHandler class structured like this: export class AppErrorHandler implements ErrorHandler { handleError(error : any){ //console.log('test error ', error.status); ...

htmlangularerror-handling

The table value is only updated once with the onclick event, but the updated value is not displayed when the event is clicked again

I am facing an issue with updating names in a table through a modal edit form. The first name update works perfectly, but the second update does not reflect in the table. I want every change made in the modal edit form to be instantly displayed in the tabl ...

javascriptcssajaxhtmldom