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

Posted 2023-03-06

【中文标题】具有浮动和全宽布局的响应式图像

【英文标题】：Responsive image with floated and full width layout

【发布时间】：2013-07-27 05:15:02

【问题描述】：

我正在开发响应式布局。请参阅此小提琴或下面的代码，例如：http://jsfiddle.net/jasonpalter/GBygZ/

图像有一个左边距——当它没有跨越其容器的整个宽度时是必需的。但是当图像跨越容器的整个宽度时，需要删除左边距。我们可以简单地使用断点来完成此操作，但如果图像本身是动态的，我们不知道它的尺寸是多少。

是否有一种自动方式（CSS，或者最好是 javascript）来确保当图像跨越其容器的整个宽度时，图像填充可以消失？

HMTL

<div class="pod">
    <div class="img-right">
        <img src="http://placehold.it/460x220"   />
    </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;

【参考方案1】：

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

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

【参考方案2】：

根据我的经验，如果不知道图像的宽度，仅在 CSS 中，这是不可能的。一个 jQuery 解决方案将非常简单

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

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

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