подбирать текст по ширине изображения

Question

подбирать текст по ширине изображения

0

размеры изображений могут отличаться, но ниже тексты не должны переполняться, чем ширина изображения для демонстрации

HTML

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

неправильно

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

правильно

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

Теперь, если мой образ больше, это должно выглядеть так

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

Есть идеи? Как мне разметка или стиль?

Bhojendra Nepal 02 окт. 2013, в 07:25

Источник

0

Это зависит от container снаружи <img> и <p> которым должны быть заданы width и width <img> а <p> должно быть 100%
vishalkin 02 окт. 2013, в 04:33
0

как я могу задать ширину контейнера в фиксированном масштабе, чтобы мое изображение могло изменить размер?
Bhojendra Rauniyar 02 окт. 2013, в 04:35

Теги:

html

css

2 ответа

0

если вы не используете js. в какой-то момент вам понадобится знать размеры изображения, если вы хотите, чтобы он отображал полное соотношение. если вы не возражаете контролировать ширину и высоту с помощью css, вы можете сделать эту скрипку.

#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>

на самом деле не отвечает на ваш вопрос, но должен дать вам представление о том, почему это сложно с помощью css2, я знаю очень мало о css3, возможно, это можно сделать с помощью css3

gwillie 02 окт. 2013, в 05:15

Ещё вопросы

Это зависит от container снаружи <img> и <p> которым должны быть заданы width и width <img> а <p> должно быть 100%
как я могу задать ширину контейнера в фиксированном масштабе, чтобы мое изображение могло изменить размер?

Danield · Accepted Answer · 2013-10-02T05-53-00.000Z

Используйте css tables и установите ширину таблицы очень маленькой.

РАБОЧИЙ ФИДДЛ

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

CSS

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