Question

我有以下html：

<div class="media">
  <img src="/img/sample.jpg">
  <div class="caption">
     Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip.
  </div>
</div>

随着浏览器尺寸的变化，图像的大小会缩小/增长。标题应位于图像上方和图像边界内。当图像大小改变时，标题的宽度必须改变。

图像足够大以容纳文本。预先不知道图像尺寸。当浏览器的视口宽度大于图像的实际宽度时，图像必须保留原始宽度。我希望标题位于图像的底部。

如果有任何css解决方案，那将是非常棒的。

感谢您的任何意见！

Answer 1

试试这个它应该完美。 http://jsfiddle.net/cornelas/ygL64/

img {
 width: 100%;
 height: 100%;
 background: #ccc;
 position: relative;    
}
.caption {
 position: absolute;
 top: 25%;
 left: 50%;
 width: 200px;
 background: rgba(255,255,255,0.2);
}

Answer 2

http://jsfiddle.net/P92Fs/7/

.media {
    position: relative;
    display: inline-block;
}
.media .caption {
    position: absolute;
    bottom: 0;
    text-align: left;
}
img {
    width: 100%;
}

如何在响应式图像上方和内部定位图像标题？

2 个答案: