我正在研究响应式布局。请参阅此小提琴或下面的代码,例如:http: //jsfiddle.net/jasonpalter/GBygZ/
图像有一个左边距——当它没有跨越其容器的整个宽度时是必需的。但是当图像跨越容器的整个宽度时,需要删除左边距。我们可以通过断点简单地完成此操作,但如果图像本身是动态的,我们不知道它的尺寸是多少。
是否有一种自动方式(CSS,或者最好是 javascript)来确保当图像跨越其容器的整个宽度时图像填充可以消失?
HMTL
<div class="pod">
<div class="img-right">
<img src="http://placehold.it/460x220" width="460" height="220" />
</div>
<h3>Lorem Ipsum</h3>
<div>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
<p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
</div>
</div>
CSS
.pod {
overflow: hidden;
padding: 5px;
border: 1px dotted #ccc;
font-family: Arial, sans-serif;
font-size: 12px;
line-height: 1.4;
}
.img-right {
float: right;
}
.img-right img {
box-sizing: border-box;
padding: 0 0 0 5px;
max-width: 100%;
height: auto;
}