浮動和全寬度佈局的響應式圖像

我正在處理響應式佈局。例如，看下面這個小提琴或代碼，例如：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

浮動和全寬度佈局的響應式圖像

回答

相關問題