JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<div class=frame>
  <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1494048414435&di=ca1830f2e123f53107a9d3f77f4d7409&imgtype=0&src=http%3A%2F%2Fimg4q.duitang.com%2Fuploads%2Fitem%2F201506%2F05%2F20150605160605_jhevY.jpeg"/>
  <span>竖直超出图片</span>
</div>
<div class=frame>
  <span>水平超出图片</span>
  <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1494048452342&di=805bb3af81dfe6e6bd1970cbda008190&imgtype=0&src=http%3A%2F%2Fs14.sinaimg.cn%2Fbmiddle%2F69bd1cc6gd4e74d5346ed%26690"/>
</div>
<div class=frame>
  <span>小尺寸图片</span>
  <img src="http://www.cnblogs.com/images/logo_small.gif"/>
</div>
</body>

CSS

.frame {
  height: 160px; /*任意值*/
  width: 160px; /*任意值*/
  display: inline-block;
  vertical-align: top; /*非必须*/
  border: 1px solid black; /*非必须*/
  position: relative;
}

img {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}


/* 以下代码非必须 */
.frame span {
  font-family: arial, sans-serif;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  color: white;
  background: rgba(0,0,0,0.4);
  font-size: 12px;
}