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

时间:2014-04-24 21:00:42

标签: css

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

这是一个小提琴的例子: http://jsfiddle.net/7UZG7/

<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>

3 个答案:

答案 0 :(得分:2)

你应该添加 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:relativeleft:2em。当它全部设定时,它将从左侧(向右)移动2em。

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


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

答案 1 :(得分: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>

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

答案 2 :(得分:0)

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

试试这个:

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