SOURCE

<div class='box'>
    <div class="imageWraper"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1560226099389&di=391b33c918a916a7960fef9b7651f1c1&imgtype=0&src=http%3A%2F%2Fmpic.haiwainet.cn%2Fthumb%2Fd%2Fuploadfile%2F20171124%2F1511492619786115%2Cw_480.jpg" />
  </div>
  <div class="title">看不见的客人</div>
</div>
<div class='box'>
    <div class="imageWraper"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1560228854325&di=8f7a5f6026c463e7bcdc159850f90bfc&imgtype=0&src=http%3A%2F%2Fimg.komovie.cn%2Finformation%2F20150225101110_31537.jpg" />
  </div>
  <div class="title">复仇者联盟</div>
</div>

body{
  background-color:#000;
  padding:0;margin:0;
  box-sizing:border-box;
}
.box{
    position: relative;
    width: 50%;
    height: 0;
    padding-bottom: 50%;
    margin:0;
    border:1px solid orange;
    box-sizing:border-box;
    float:left;
}
.box div.imageWraper {
    position:  absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.box .title{
  position:absolute;
  bottom:0;
  color: #fff;
  background-color:#333;
  opacity:.8;  
}
.box div.imageWraper img {  
    max-width: 100%;
    max-height: 100%;
}