ページロード後にdivが増加した場合、応答イメージは増加しません

Question

Bootstrapカラム（col-md-4）に3つの応答性の高いpinterest-likeカードを作成しています。中程度の幅のスクリーン（例えば、ランドスケープのipad）。ディスプレイが小さな画面サイズに縮小され、ブートストラップが単一の列表示に変わるまで（例えば、ポートレートモードのiPad）、それらは縮小して、すばやく成長する。この時点で、カードラッパーdivのサイズは正しく増加します。元の3列サイズよりも大きくなりましたが、イメージは最初のページの読み込み時のサイズに増加するだけで、カードの外観が損なわれます。

画面をシングルカラムモードでリフレッシュすると、イメージが正しくロードされ、正しくスケールされます。スクリーンショットを参照してください。素子の検査

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