Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Shrink-to-fit div and paragraph, based on image?

Tags:

html

css

The code below is a simplified version of my website. On my site, the image width varies from page to page and the text is around 100 words. That means the paragraph stretches the DIV to be wider than the image. Using only CSS, is it possible to shrink the DIV and the paragraph to the width of the image?

JSFiddle here

Example of what I'm trying to describe here. Top is what I'm getting, bottom is what I want.

HTML

<div>
    <img src="image.jpg" />
    <p>Lorem ipsum dolor sit amet.</p>
</div>

CSS

div {
   display: inline-block;
   }
like image 498
colindunn Avatar asked Mar 30 '12 22:03

colindunn


People also ask

How do I resize a div to fit an image?

To auto-resize an image or a video to fit in a div container use object-fit property. It is used to specify how an image or video fits in the container. object-fit property: This property is used to specify how an image or video resize and fit the container.

How do I scale an image to fit CSS?

The CSS object-fit property is used to specify how an <img> or <video> should be resized to fit its container. This property tells the content to fill the container in a variety of ways; such as "preserve that aspect ratio" or "stretch up and take up as much space as possible".


2 Answers

And for doing anything table related I shall forever shame myself: http://jsfiddle.net/WM6hK/3/

div {
display: table;
border: 1px solid red;
width: 1%;
}

p {
border: 1px solid blue;
}​
like image 156
mikevoermans Avatar answered Oct 01 '22 15:10

mikevoermans


You can use this:-

    div {
    width:20%;
    display:inline-table;
    }


p {
    border: 1px solid blue;
    }

It will totally work according to image size.....

see the demo:- http://jsfiddle.net/WM6hK/11/

like image 32
Shailender Arora Avatar answered Oct 01 '22 13:10

Shailender Arora