如果div在頁面加載後增加，響應圖像不會增長

Question

我正在製作一系列響應式pinterest樣卡片，每個卡片都放在引導列（col-md-4）中 - 因此它們顯示爲三行中等寬度的屏幕（例如橫向的ipad）。它們會縮小和壯大，直到顯示屏縮小到小屏幕大小，此時Bootstrap變成單列顯示（例如，在縱向模式下的iPad）。在這一點上，卡包裝div的尺寸正確地增加 - 現在比原來的三列尺寸更寬 - 但圖像只增加到初始頁面加載時的尺寸，所以它破壞了卡的外觀。

如果以單列模式刷新屏幕，圖像將正確加載並正確縮放。請參閱截圖。

Screen shot of problem

檢查的元件示出，雖然原始圖像是適當大的瀏覽器創建圖像僅大到它最初需要顯示。因此它只能變小，不能變大。

這是一個瀏覽器如何縮放圖像不可逾越的問題？有沒有辦法強制瀏覽器加載全尺寸的圖像開始？

任何想法？

/*CSS*/ 
.card-wrapper { 
    text-align: center; 
    padding-bottom: 1.5em; 
    margin-bottom: 3em; 
    -webkit-box-shadow: 0 1px 2px 0 rgba(0,0,0,0.75); 
    -moz-box-shadow: 0 1px 2px 0 rgba(0,0,0,0.75); 
    box-shadow: 0 1px 2px 0 rgba(0,0,0,0.75); 
    border-radius: 25px; 
} 

.card-wrapper IMG { 
    border-top-left-radius: 25px; 
    border-top-right-radius: 25px; 
    margin: 0 0 20px; 
    display: block; 
    max-width: 100%; 
    height: auto; 
} 

/*HTML*/ 
<div class="card-wrapper"> 
<img src="card-image.jpg" width="1346" height="776"/> 
<h2>Card Title</h2> 
<p>Card Text</p> 
<a href="Card-Link">Card Button</a> 
</div> 

Answer 1

你是固定的width和image的height。這可能是導致你問題的原因。

嘗試從image取出width和height屬性，並在你的CSS添加width:100%完全負載與瀏覽器的大小變化了。你可以保持寬度100％或任何適合你的需要。

HTML：

<img src="card-image.jpg"/> 

CSS：

.card-wrapper IMG { 
    border-top-left-radius: 25px; 
    border-top-right-radius: 25px; 
    margin: 0 0 20px; 
    display: block; 
    width: 100%; 
    height: auto; 
}