Правильное выравнивание подписей к изображениям

Ключевым моментом является не установка ширины для элемента img или родительского контейнера. Если родитель, .image, просто плавает или каким-либо другим образом адаптируется так, чтобы он сжимался до размера своего содержимого, это должно работать.

Я использовал float для достижения аспекта термоусадочной пленки, но position: absolute; сделает то же самое, что и display: inline-block;.

На JS Bin есть демонстрация, которая использует jQuery для перестановки изображений, но ничего не делает для ширина любых элементов. CSS воспроизводится ниже:

  .image {
    float: left;    // for the shrink wrap
    padding: 1em;   // To achieve the bordered effect
    background-color: #666;  // just for contrast
    -moz-border-radius: 2em;  // for that web 2.0 goodness...
    -webkit-border-radius: 2em;
    border-radius: 2em;
  }
  .image img {
    -moz-border-radius: 2em;    // no width, anywhere. Presumably width: auto, would  
    -webkit-border-radius: 2em; // work, but that's redundant, since it's the default
    border-radius: 2em;
  }
  .image img + .caption {
    width: 100%;              // forcing the .caption to take up 100% of the width
    background-color: #ffa;   // of its parent, except for the padding, so that it's
  }                           // the same width as the image above.

Как сказал @Kyle, блочные элементы регулируют свою ширину в соответствии с шириной своего родителя. Однако установка блочного элемента как встроенного не является правильным подходом: вам нужно установить div .image как плавающий элемент, таким образом достигнув аналогичного результата, сохранив при этом функции блочного элемента. CSS, чтобы сделать трюк, должен быть:

.image {
  float: left;
  display: inline; /* needed to fix the (IE <= 6) "3 pixels out of nowhere bug" */
  /* whatever code you may find appropriate in order to render the rounded border */
}
.image .caption {
  clear: left;
}

Я оставил вам любые дальнейшие улучшения стиля, которые вы можете счесть необходимыми.

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

Итак, в основном вам понадобится следующий CSS:

.image {
    padding: 10px;
    width: 300px; /* assuming the picture is 300px */
}

Попробуйте следующее:

.image {
    position: relative;
    width: 250px;
}
img {
    border: 15px solid #777777;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    width: 100%;
}
.caption {
    border-left: 15px solid #777777;
    border-right: 15px solid #777777;
    border-bottom: 15px solid #777777;
    position: absolute;
    width: 100%;
    bottom: 0px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

<div class="image">
    <img src="yourImage" height="150px" />
    <div class="caption">
        Caption TextCaption TextCaption TextCaption TextCaption Text
    </div>
</div>

Теперь причина, по которой я применил 3 границы к блоку заголовка, заключается в том, что вы не знаете ширину изображения без границы, но знаете ширину границы для изображения. Применение той же рамки к заголовку придаст заголовку ту же ширину. Конечно, вам нужно будет настроить ширину .image и высоту тега img (это можно сделать через css), но все остальное будет сделано за вас. Кроме того, div заголовка будет изменять размер для увеличения подписей.

С уважением,

Ричард

PS этот код был опробован в Chrome - он отлично работает.

Поскольку элементы div являются элементами блочного уровня, они расширяются, чтобы соответствовать своему родителю.

Возможно, это не лучшее решение, но если вы заранее не знаете размер изображения, вы можете сделать следующее:

.image
{  
    padding: 10px;
    max-width: 590px;  
    disply: inline;  
}

.caption
{  
    background-color: #2A2A2A;
    disply: inline;  
}

Приведенное выше приведет к тому, что img div будет отображаться как встроенный элемент, который уменьшит его, чтобы он соответствовал содержимому, а не его родительскому элементу, а padding добавит границу.

Я придумал другое решение. Я не верю, что ответ Дэвида Томаса заставляет подпись появляться на изображении (во что бы то ни стало, поправьте меня, если я ошибаюсь), поэтому попробуйте код ниже (я использовал комбинацию моего кода и Дэвида).

.image {
    position: relative;
    float: left;
    border: 15px solid #777777;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
.caption {
    position: absolute;
    bottom: 5px;
    left: 5px;
}
.image-container {
    position: relative;
}

<div class="image">
    <img src="/Images/header1.png" />
    <div class="caption">
        Caption Text Caption Text Caption Text Caption Text Caption Text Caption Text Caption Text Caption Text Caption Text Caption Text
    </div>
</div>