Question

我正在制作响应式布局。请参阅下面这个小提琴或代码，例如：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;
}

Answer 1

要在javascript中执行此操作，您需要创建一个Image对象，将其src属性设置为图像源，然后将捕获图像尺寸的函数传递给图像对象{ {1}}属性。使用该信息，您可以将函数绑定到窗口的onload事件，该事件在图像跨越容器的整个宽度时剥离图像的填充，并在相反的情况下恢复它。

遗憾的是，在CSS中没有办法做到这一点，尽管能够只编写resize选择器会很好！

Answer 2

在我的经验中，如果不知道图像的宽度，仅在CSS中就不可能实现。 jQuery解决方案非常简单

DEMO http://jsfiddle.net/kevinPHPkevin/GBygZ/5/

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

当您在小提琴中测试时，它将无效，因为窗口是浏览器窗口宽度，而不是分配给小提琴的可编辑列的宽度。

具有浮动和全宽布局的响应图像

2 个答案: