SOURCE

<!--padding是相对于父级元素的宽度来设置的-->
<div class="container">
  <div class="content">
    主体内容
  </div>
</div>
<br>
<div class="container2">
  <div class="content2">
  </div>
</div>
<br>
<div class="container3">
</div>
<br>
<div class="container4">
  <img src="http://sandbox.runjs.cn/uploads/rs/35/fqbj1cri/man_zu_zhi_wang.jpg"
  alt="" />
</div>

.container {
  width: 200px;
  box-sizing: border-box;
  border: 1px solid red;
  height: 100px;
  padding: 10%;
}

.container2 {
  width: 200px;
  box-sizing: border-box;
  border: 1px solid red;
  padding: 10%;
}

.content2 {
  padding: 50%;
  border: 1px solid blue
}

.container3 {
  width: 100%;
  height: 100px;
  background: url('http://sandbox.runjs.cn/uploads/rs/35/fqbj1cri/man_zu_zhi_wang.jpg') no-repeat;
  background-size: cover;
}

.container4 {
  padding: 50% 0 0;
  position: relative;
}

.container4>img {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}