在自动调整大小的图像下定位文本

Question

我遇到了一些 CSS 问题。我正在根据用户浏览器窗口的大小调整图像大小，但是当我这样做时，我的文本会穿过图像。我可以通过给容器一个以像素为单位的高度而不是 auto 来解决这个问题，但是在调整浏览器大小时看起来不正确。

我在这里做了一个简单的例子来说明我的问题http://jsfiddle.net/34k2H/1/

<div id="coverContainer" style="position:relative; height:auto; width:100%;" class="center-block">
    <img class="photo center-block" src="https://www.google.co.uk/images/srpr/logo11w.png" />

</div>


<div class="center-block">
    <h2 style=" color:black;">
        Welcome to my website
    </h2>
    <div id="news">
        <h2 style="color:black;">News</h2>
        <p style="color:black;">Example Text Example Text Example Text Example Text Example Text Example Text Example Text Example Text Example Text .</p>
    </div>
</div>

css

.photo {
    box-shadow: 3px 3px 3px black;
    position:absolute;
    max-width: 100%; 
    height: auto;
}

我希望文本始终位于图像下方。

任何帮助都会很棒。

谢谢

Answer 1

您的图片有一个position: absolute，我在 jsfiddle 中为您修复了它。

http://jsfiddle.net/34k2H/2/