responsive image does not grow if div increases after page load

Question

I am making a series of 3 responsive pinterest-like cards, each one in a Bootstrap column (col-md-4) - so they appear as a row of three on medium width screens (e.g. ipad in landscape). They shrink and grow superbly, until the display shrinks to small-screen size at which point Bootstrap changes to a single column display (e.g. iPad in portrait mode). At this point the card wrapper div correctly increases in size - now wider than the original three column size - but the image only increases to the size it had on initial page load, so it ruins the card look.

If the screen is refreshed in the single column mode, the image loads correctly, and scales properly. See screen shot.

Screen shot of problem

Inspecting the element shows that although the original images are suitably large the browser creates an image only as large as it initially needs to display. Consequently it is only possible for it to get smaller, not larger.

Is this an insurmountable issue with how browsers scale images? Is there a way to force the browser to load the full size image to start with?

Any ideas?

/*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

you are fixing the width and height of the image. This may be what is causing your issue.

Try removing the width and height attribute from the image and add width:100% in your css to fully loads with browser size change too. you can keep width 100% or whatever suits your need.

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