Question

是否可以将图像拟合到受最大宽度限制的外部div宽度？

<div style="width:100%;">
<div style="max-width:30%; background-color:red; float:right; padding:10px;"><img src="http://www.acasa.org.br/ensaio/grande/506.jpg"></div>
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum 
</div>

Answer 1

你应该添加 position:relative;和width:100%

像这样：

<img style="position:relative;width:100%;" src="http://www.acasa.org.br/ensaio/grande/506.jpg">

这是因为当元素的位置是相对的，并且如果它的大小（高度和/或宽度）以百分比给出，则该元素将相对于其父元素大小。在这种情况下，父级将是包装图像的div。

http://www.webdevdoor.com/html-css/css-position-child-div-parent/

通常position:relative;告诉浏览器它的位置是相对于其正常位置的。我们假设您已将left:2em;添加到相对定位的项目中。您可以想象浏览器首先加载图像而不应用position:relative和left:2em。当它全部设定时，它将从左侧（向右）移动2em。

（它可能在没有position:relative的情况下工作。虽然，对于今天的跨浏览器要求，定义您正在设置大小和/或位置属性的元素的位置类型并不会有害。

我花了很多时间与CSS定位争论，如果你打算使用CSS，我真的建议你理解定位。这将帮助您入门：http://www.w3schools.com/css/css_positioning.asp

Answer 2

当然是：）

让你的CSS如此

.container {
    width:100%;
}
.image-container {
    width:100%;
    max-width:30%;
}
.image-container img {
    width:100%;
    height:auto;
}

和HTML一样

<div class="container">
    <div class="image-container">
         <img src="/img/source">
    </div>
    <p>Your Text</p>
</div>

作为旁注，尽量不要内联样式项 - 减少可重复使用的代码。如果我还有其他答案，请告诉我。

Answer 3

您只需将<img>代码设置为width:100%;。

试试这个：

http://jsfiddle.net/7UZG7/4/

css外部div最大宽度比例内部图像

3 个答案: