如果 div 在页面加载后增加，响应图像不会增长

Question

我正在制作一系列 3 张类似 pinterest 的响应式卡片，每张都在 Bootstrap 列中 (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

您正在修复 image 的 width 和 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;
}

如果 div 在页面加载后增加，响应图像不会增长

responsive image does not grow if div increases after page load

twitter-bootstrap

responsive-images