CSS image resizing while keeping proportional - html

Question

I'm trying to create a UI element that remains centered and the image scales to the size of the container. I have additional caption and text over the image. But the image seems to scale proportionally over only some of the range when I adjust the height or width. Preferably using only CSS and HTML. The top-level div does need to be absolutely positioned. I'm indifferent to the use of flexbox. That was just one tact I've tried.
Here it is as a codepen.
And the full code is below, though it is easier to play with it in the codepen as you can adjust the results pane easily. (open up the console so you can also adjust height.)
.block {
/* this needs to remain an absolute positioned block with size and location expressed in percent */
position: absolute;
height: 80%;
width: 80%;
top: 10%;
left: 10%;
background-color: #777777;
/* Don't care if using flexbox */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
align-content: center;
text-align: center;
}
.imagecontain {
position: relative;
padding: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
align-content: center;
}
.image {
max-height: inherit;
max-width: calc(100% - 8px);
padding: 0 !important;
border: 4px solid #123456 !important;
}
.button {
border-color: #b2b2b2;
background-color: #f8f8f8;
color: #444;
position: relative;
display: inline-block;
margin: 0;
padding: 0 12px;
min-width: 52px;
min-height: 47px;
border-width: 1px;
border-style: solid;
border-radius: 2px;
vertical-align: top;
text-align: center;
text-overflow: ellipsis;
font-size: 16px;
line-height: 42px;
cursor: pointer;
box-shadow: 0px 0px 3px #888888 !important;
}
.overimage {
vertical-align: bottom;
position: absolute;
bottom: 10%;
left: 50%;
max-width: 80%;
min-width: 60%;
padding: 5px;
opacity: .7;
transform: translateX(-50%);
background-color: black;
color: white;
border-radius: 10px;
z-index: 2;
}
.name {
text-align: bottom;
background-color: white;
padding: 5px;
border: 1px solid black;
}
<div class="block">
<div class="imagecontain">
<div class="overimage">this is a test of the emergency broadcast</div>
<img class="button image" src="https://scontent-dfw1-1.xx.fbcdn.net/hphotos-xfa1/v/t1.0-9/582520_10151526852434301_1015227082_n.jpg?oh=6537667094d5a160b8fbab0728dc2f5a&oe=57971FCB">
</div>
<div class="name">Mountains</div>
</div>

Answer 1

Use the background-size properties in CSS. Change your image from an tag to the background of the div. The specific property you're looking for is probably
background-size: cover;
http://www.w3schools.com/cssref/css3_pr_background-size.asp

Answer 2

Add:
.imagecontain {
max-width: 100%;
width: 100%
}
Remove:
.block {
height: 80%;
}