Изменение размера изображения CSS при сохранении пропорциональности

Question

Я пытаюсь создать элемент пользовательского интерфейса, который остается центрированным, а изображение масштабируется до размера контейнера. У меня есть дополнительный заголовок и текст над изображением. Но изображение, по-видимому, масштабируется пропорционально только некоторым диапазонам, когда я настраиваю высоту или ширину. Предпочтительно использовать только CSS и HTML. Диверсия верхнего уровня должна быть абсолютно позиционирована. Я безразличен к использованию flexbox. Это был только один такт, который я пробовал.

Здесь он находится как codepen.

И приведен полный код ниже, хотя в кодексе легче играть с ним, так как вы можете легко настроить панель результатов. (Откройте консоль, так что вы можете также отрегулировать высоту.)

.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

Использование свойств фона размера в CSS. Измените изображение с тега на фон div. Специфическое свойство вы ищете, вероятно,

background-size: cover; 

http://www.w3schools.com/cssref/css3_pr_background-size.asp

Answer 2

Добавить:

.imagecontain { 
    max-width: 100%; 
    width: 100% 
} 

Снимите:

.block { 
    height: 80%; 
}