我正在研究响应式布局。有关示例,请参阅此 fiddle 或下面的代码:http://jsfiddle.net/jasonpalter/GBygZ/
图像有左边距——当它没有跨越其容器的整个宽度时这是必需的。但是当图像跨越容器的整个宽度时,左边距需要被移除。我们可以简单地通过一个断点来实现这一点,但是图像本身是动态的,我们不知道它的尺寸是多少。
是否有一种自动方式(CSS,或者不太优选的 javascript)来确保当图像跨越其容器的整个宽度时图像填充可以消失?
HTML
<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;
}
最佳答案
要在 javascript 中执行此操作,您需要创建一个 Image
对象,将其 src
属性设置为图像源,然后传递一个抓取图像的函数图像对象的 onload
属性的尺寸。有了这些信息,您可以将函数绑定(bind)到窗口的 resize
事件,当图像跨越容器的整个宽度时去除图像的填充,并在相反情况发生时恢复它。
不幸的是,在 CSS 中没有办法做到这一点,尽管能够只编写一个 img:not(:resized)
选择器会很好!
关于css - 具有 float 和全宽布局的响应图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17889744/