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

更具体地说，这里有一张图片显示了我正在尝试做的事情：

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

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

无论如何，要让这两个人在舱里相处

---

谢谢

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

您可以从

css

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

使容器内的

img

居中的关键是使容器

文本对齐：居中然后您需要应用
最大宽度：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>

共享您的代码或使用JSFIDLE会更好。您可能想看看flexbox。这里有一个很好的教程：当你使用
width:1060pxmax-width:1060px
，因此我唯一做错的事情似乎是对容器类使用width而不是max-width。。。谢谢
.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 */
    }