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

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

来源

2013-07-26 jasonp

在Javascript中做到这一点，你需要创建一个Image对象，其src属性设置为图像源，然后通过一个函数将图像尺寸抓取到图像对象的onload属性。利用这些信息，您可以将函数绑定到窗口的resize事件，该事件在图像跨越容器的整个宽度时将图像的填充剥离，并在发生相反情况时将其恢复。

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

来源

2013-07-26 20:12:02 giaour

根据我的经验，如果不知道图像的宽度，就不可能单独使用CSS。一个jQuery的解决方案是非常简单的

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

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

当你测试这在拨弄它不会随着窗口的工作是浏览器窗口的宽度，而不是分配可编辑列的宽度到小提琴。

来源

2013-07-26 20:33:15 Vector

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

回答

相关问题