如果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; 
}