Images within divs are being cut off due to height differences, how to display them entirely?

My site consists of 3 divs (blueish boxes) lined in a row. Each div contains an image and either 3 or 4 lines of text, which each residing within a p tag

The problem is that the images are not being shown entirely within the divs. Instead the sides are being cut off and this obscures the image. In the following demo you can see the divs containing cut-off images, and then the full-size images below them for reference. Demo here

Please note that the images are different heights, yet they do not disrupt the even alignment of the lines across each div as shown below. I'd like this feature to remain:

How do I make the images display entirely within the div (including feathering effect)? I've created a mockup below of the ideal solution:

The code for the first div is:

<a href="htada">    
<p class="vignette" style="background-image:url(http://ift.tt/1AT5qz2)"></p>
<p class="redbox">&nbsp;</p>
<p class="titlebox">Demo</p>
<p class="locationbox">Demo</p>
<p class="pricebox">Demo</p>
                  <!-- END OF SINGLE LISTING -->
</a>

and it's CSS:

.mainbox a {
display: inline-block;
vertical-align: top;
margin: 0 0.5em 0;
width: 28%;
background: #E7E6F2;
box-shadow: 0 50px 0 #E7E6F2 , 0 100px #E7E6F2 , 0 150px #E7E6F2;
border-top: 1em solid white;
padding: 0.5em;
margin-top: 151px;
height: 700px;
}

You can see the image is produced using a div with style of background-image:url(http:// ... and that div's CSS is:

.vignette {
         width: 90%;
       margin-left:auto;
       margin-right:auto;
       margin-bottom:1%;
       margin-top: 4%;
        box-shadow: 15px 15px 40px #E7E6F2 inset,-15px -15px 40px #E7E6F2 inset;
        height: 290px;
        background-size: cover;
        background-repeat: no-repeat;
    }

Thanks for your help!