css outer div max-width scale 内部图像

Question

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

这是一个 fiddle 示例: 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>

Answer 1

当然是:)

像这样制作你的 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>

作为旁注，尽量不要内联样式项 - 会导致代码的可重用性降低。让我知道是否还有其他问题需要回答。