是否可以将图像拟合到受最大宽度限制的外部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>
答案 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:relative
和left: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)