CODEWITHSUNDEEP
htmlcss
Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

fit texts according to image width

images sizes may vary but below texts should not overflow than the image width for demonstration

html

<img />
<p>some text</p>

wrong

+----------------------------+
|                            |
|                            |
|       image                |
|                            |
|                            |
|                            |
+----------------------------+
The result should not be this because overflowing the image width

right

+----------------------------+
|                            |
|                            |
|       image                |
|                            |
|                            |
|                            |
+----------------------------+
The result should be this 
because its not overflowing 
the image width

Now if my image is bigger this should be look like this

+------------------------------------------------------+
|                                                      |
|                                                      |
|                                                      |
|                                                      |
|                                                      |
|                                                      |
|        image                                         |
|                                                      |
|                                                      |
|                                                      |
|                                                      |
|                                                      |
+------------------------------------------------------+
The result should be this because its not overflowing 
the image width

Any idea? How should I markup or give style?

Upvotes: 0

Views: 76

Answers (2)

Danield
Danield

Reputation: 125463

Use css tables and set width of table to be very small.

WORKING FIDDLE

<div>
  <img />
  <p>some text</p>
</div>

CSS

div
{
    display: table;
    width: 1px;
}
img, p
{
    display: table-row;
}

Upvotes: 1

gwillie
gwillie

Reputation: 1899

not unless you use js. at some point you are going to need to know the dimensions of the image if you want to have it display full ratio. if you dont mind controlling the width and height with css you can do this fiddle. 

#f {
    background:url('http://jquery.malsup.com/cycle2/images/beach1.jpg') no-repeat top left;
    height:200px;
    width:200px;
    border:1px solid blue;
    vertical-align:text-bottom;
}
#content{
    position:relative;
    bottom:-100%;
    border:1px solid red;
}

<div id="f">
    <p id="content">
    Sets the width and height of the background image. The first value sets the width, the second value sets the height. If only one value is given, the second is set to "auto"
    </p>
</div>

doesn't really an answer your question, but should give you an idea of why it is difficult with just css2, i know know very little about css3, maybe it could be done with css3

Upvotes: 0

Related Questions