Q:

Center-aligned divs, resizing images and transparent effects

I have this page: https://jsfiddle.net/pnLg2mrh/1/
I need to know:

How to automatically resize images so that they fit inside each yellow block
How to make the blue border div automatically resizing to contain the yellow blocks
How to center align the yellow blocks inside the blue border div

<div class="container">
<div class="block">
    <a href="https://imgur.com/BTMfPIm.jpg">
        <img src="https://imgur.com/BTMfPIm.jpg" class="img">
        <div class="shade"></div>
    </a>
</div>
<div class="block">
    <a href="https://imgur.com/eoSvnK8.jpg">
        <img src="https://imgur.com/eoSvnK8.jpg" class="img">
        <div class="shade"></div>
    </a>
</div>
<div class="block">
    <a href="https://imgur.com/u1gFAvc.jpg">
        <img src="https://imgur.com/u1gFAvc.jpg" class="img">
        <div class="shade"></div>
    </a>
</div>

.container {
    border: 9px solid #55f;
    width: 88%;
    height: 40px;
    margin: 0 auto;
}
.block {
    position: relative;
    width: 18%;
    height: 300px;
    border: 9px solid red;
    float: left;
    margin: 25px;
}
.img {
    display: block;
}
.shade {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  opacity: 1;
  background-color: rgba(225,255,0,0.7);
}

A:

I solved the problem crossing mine and user181934's code.  Further, i used justify-content and align-items to get the elements centered. 
This is the result in jsfiddle: https://jsfiddle.net/pnLg2mrh/23/ 

Here the full code:
<! DOCTYPE html>
<html>
<head>
<style>
.container {
    display: flex;
    justify-content:center;
    align-items:center;
    background: -webkit-linear-gradient(left, rgba(0,255,0,0)0%, rgba(29,224,59,10.8)100%);
    background: -o-linear-gradient(left, rgba(0,255,0,0)0%, rgba(29,224,59,10.8)100%);
    background: -ms-linear-gradient(left, rgba(0,255,0,0)0%, rgba(29,224,59,10.8)100%);
    background: -moz-linear-gradient(left, rgba(0,255,0,0)0%, rgba(29,224,59,10.8)100%);
    background: linear-gradient(to right, rgba(0,255,0,0)0%, rgba(29,224,59,10.8)100%);
    width: 72%;
    height: 100px;
    margin: 0 auto; 
    margin-top: 160px;
    }
.block {
    align: center;
    position: relative; 
    width: 19%; 
    border: 3px solid black; 
    -webkit-border-radius: 33px; 
    -moz-border-radius: 33px; 
    border-radius: 33px;
    float: left; 
    margin: 6px; 
    }
.img {
    width: 100%; 
    display: block; 
    border-radius: 31px; 
    }
.shade {
    position: absolute;
    border-radius: 30px; 
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    opacity: 1;
    transition: .9s ease;
    background-color: rgba(225,0,0,0.8); 
    }
.block:hover .shade { 
    opacity: 0; 
    }
</style>
</head>
<body>

<div class="container">
    <div class="block">
        <a href="https://imgur.com/M6gGG7x.jpg">
            <img src="https://imgur.com/M6gGG7x.jpg" class="img">
            <div class="shade"></div>
        </a>
    </div>
    <div class="block">
        <a href="https://imgur.com/kfpD5cv.jpg">
            <img src="https://imgur.com/kfpD5cv.jpg" class="img">
            <div class="shade"></div>
        </a>
    </div>
    <div class="block">
        <a href="https://imgur.com/YlbMNNw.jpg">
            <img src="https://imgur.com/YlbMNNw.jpg" class="img">
            <div class="shade"></div>
        </a>
    </div>
</div>

</body>
</html>

