灵活的 img，在固定宽度的 div 内，上面有一个绝对 div

Question

更具体地说，这是一张显示我正在尝试做的图片：

特定宽度居中的 div 包含一个 img，其右上角有一个文本 div。 我在这里面临两个问题。

• 如果我为容器设置一个固定宽度而不是 100%，则 img 当您使用浏览器时，它会忽略调整大小 宽度。
• 如果我将容器宽度设置为 100%，则 img 会调整大小 任何问题，但文本 div 的位置会忽略其容器，因此如果您调整浏览器的大小，它似乎固定在屏幕内。

无论如何要让这两个在div内相处？

谢谢！

Answer 1

我已经建立了一个快速示例，应该可以模仿我对您问题的理解。
Check this fiddle

您可以从css 中删除边框，它们仅用于演示，因此您可以在调整浏览器大小时识别每个元素的边框

在容器中将img居中的关键是为该容器提供text-align:center;，然后您需要将max-width: 100%;与margin:auto一起应用于img，以便在播放时动态调整图像大小与浏览器的宽度一致

HTML

<div class="container">
        <div id="text">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla hendrerit magna eros, sed adipiscing neque sollicitudin ac. Aenean in nisi faucibus erat bibendum elementum. Quisque blandit nisi et accumsan dapibus. Cras placerat sagittis lacinia. Quisque eu erat tortor. Donec imperdiet massa nulla, at aliquam lacus rhoncus auctor. Integer vitae nunc sollicitudin, elementum orci et, rhoncus orci. Sed ut adipiscing mi.              
        </div>

        <img src="http://www.outcomes.somee.com/images/kitchen_adventurer_caramel.jpg" />
    </div>

CSS

.container {
        max-width: 980px;
        position: relative;
        margin: 0 auto;
        border: 1px solid green;
        text-align: center;
    }

    #text {
         position: absolute;
         right: 0px;
        border: 1px solid black;
        text-align: left;
        width:200px;
    }

    img {
        max-width: 100%;
        height: auto;
        width: auto\9; /* ie8 */
    }