Правильно выравнивая заголовки изображений

Question

Как мне добиться такого макета?

Сейчас я использую этот HTML:

<div class="image">
  <img>
  <div class="caption">
    Caption Text
  </div>
</div>

И этот CSS:

.image {
  background-color: #2A2A2A;
}

img {
  max-width: 590px;
}

Но поле .image слишком большое (так как оно расширяется, чтобы соответствовать родительскому элементу):

Answer 1

Ключ к не задает ширину для элемента 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.

Answer 2

Как сказал @Kyle, блочные элементы корректируют свою ширину, чтобы соответствовать их родителям. Однако установка блочного элемента как встроенного не является правильным подходом: вам нужно установить .image div в качестве плавающего элемента, достигая, таким образом, аналогичного результата, сохраняя свойства блочного элемента. 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;
}

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

Answer 3

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

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

Answer 4

Попробуйте выполнить следующее:

.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), но все остальное будет сделано за вас.Кроме того, размер заголовка будет изменен для больших заголовков.

С уважением,

Ричард

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

Answer 5

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

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

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

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

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

Answer 6

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

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

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