灵活的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 */
    }