Question

我正在制作一系列3张响应式pinterest-like卡片，每张卡片都位于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

您正在修复width的{{1}}和height。这可能是导致您出现问题的原因。

尝试从image中删除width和height属性，并在您的css中添加image，以便在浏览器大小更改时完全加载。您可以保持宽度100％或任何适合您需要的宽度。

<强> HTML：

width:100%

<强> CSS：

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

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

1 个答案: