CSS image resizing while keeping proportional
<p>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.</p>

<p>Here it is as a <a href="http://codepen.io/furnaceX/pen/GZBdqR?editors=1101" rel="nofollow">codepen</a>.  </p>

<p>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.)</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="block"&gt;
  &lt;div class="imagecontain"&gt;
    &lt;div class="overimage"&gt;this is a test of the emergency broadcast&lt;/div&gt;
    &lt;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&amp;oe=57971FCB"&gt;
  &lt;/div&gt;
  &lt;div class="name"&gt;Mountains&lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>