使用浮动和全宽布局实现响应式图片

Question

我正在开发一个响应式布局。请参见以下示例代码或此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;
}

- jasonp

Answer 1

在我的经验中，仅通过CSS无法确定图像的宽度，因此这似乎是不可能的。使用jQuery解决方案将非常简单。

演示 http://jsfiddle.net/kevinPHPkevin/GBygZ/5/

var windowWidth = $(window).width();
if ($('#image').width() < windowWidth) {
    $('#image').css('padding-left', '10px')
}

当您在fiddle中测试时，它将无法正常工作，因为窗口是浏览器窗口宽度，而不是分配给fiddle的可编辑列的宽度。

- Kevin Lynch

Answer 2

要在JavaScript中实现这个功能，您需要创建一个Image对象，将其src属性设置为图像源，然后传递一个函数来获取图像的尺寸到图像对象的onload属性。有了这些信息，当图像跨越容器的整个宽度时，您可以将一个函数绑定到窗口的resize事件上，以去除图像的填充，并在相反情况下恢复它。

不幸的是，在CSS中没有办法做到这一点，尽管能够编写一个img:not(:resized)选择器会很好！

- giaour