正确对齐图像标题

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

如果将 .image 框的宽度设置为与图像相同的宽度，然后将 padding 应用于 .image 框，您将获得您正在寻找的边框因为当您指定宽度时，会添加填充。

基本上，您需要以下 CSS：

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

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>

现在我对标题 div 应用 3 个边框的原因是因为您不知道没有边框的图像的宽度，但您确实知道图像边框的宽度。对标题应用相同的边框将使标题具有相同的宽度。当然，您需要调整 .image 的宽度和 img 标签的高度（这可以通过 css 完成），但其余的将为您完成。此外，标题 div 也会调整大小以获得更大的标题。

此致，

理查德

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