Html 嵌入div重叠中的图片

我有一个问题，一张图片从它的容器里出来了

<div id="home"  class="cadre">      

<div id="photo">
    <img style="height:80%;float:right;max-height:250px;" src="images/photo.jpg"/>
</div>

<div style="width:70%;">  

Some text
</div>
</div>

我是CSS新手，所以我可能犯过设计错误，但我仍然不明白为什么图片会超出框架

---

它似乎还取决于OS/explorer，因为它在Windows/Chrome上运行良好，但在Linux/Firefox上运行不好。

您需要定义父div，其中照片嵌入的方式不允许任何元素“过火”

#照片{
溢出：隐藏；
}

#照片图像{
最大宽度：100%；
最大高度：100%；
}

---

在您的情况下，应该这样做。

尝试以下方法来解决您的父子宽度问题：

<div class="wrapper">
    <div class="inner"> 
        <div id="pic">
            <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcT6xO92YTljrxvGfxHRnZ_F-jjYGQvfRST-18K3cJhJYPNfBlLTdg"/>
        </div>
        <div id="text">
            some text
            <br/><br/><br/><br/><br/><br/><br/>
            other text
        </div>
      </div>
</div>

---

将

overflow:hidden

添加到

#photo

中，它是否只是隐藏溢出，而不是将照片缩小到适当的大小？与问题无关：如果使用

框大小：边框框

，可以避免像

宽度：45%

和

宽度：95%

这样的奇怪规则。现在你可以按你的意愿使用

50%

和

100%

。我将div照片的背景设置为红色，而这个div远低于实际图片，我看不出如何更正。它似乎没有改变任何东西：/如果我将其添加到#home而不是#photo中，div将变得巨大！这里的问题似乎是“照片”溢出了“家”，请在您的问题中更具体一些，也许可以为我们做一个小提琴来获得图片。如果您的图片超出了div“overflow:hidden”的范围，那么应该解决这个问题。它变得巨大，因为你将它设置为相对于更大的家庭div。请说得更具体一些，这样我们可以提供帮助。这里有一个小问题：我想要的是图像保留在红色的div中，并自动调整到文本块的大小。谢谢，但问题是我不想给出img的大小，我希望它与文本的大小相匹配。它现在似乎可以工作了，除了谢谢，我什么都不懂！

<div class="wrapper">
    <div class="inner"> 
        <div id="pic">
            <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcT6xO92YTljrxvGfxHRnZ_F-jjYGQvfRST-18K3cJhJYPNfBlLTdg"/>
        </div>
        <div id="text">
            some text
            <br/><br/><br/><br/><br/><br/><br/>
            other text
        </div>
      </div>
</div>

.wrapper {
    max-height: auto;
    background: red;
    display: table;
}
.inner {
    display: table-row;
}
#pic {
    float: right;
    height: 180px;
    max-height: 100%
}
#text {
    width:70%;
}