问有没有办法让图像自己调整到一个固定的分辨率，但不应该看起来奇怪？

EN

.container {
    border: 1px solid #777;
    text-align: center;
    padding: 10px;
    margin: 10px;
}
.container img {
    max-height:100%;
    max-width: 100%;
    vertical-align: middle;
}
.helper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

<div class='container' style="width:200px;height:200px">
  <span class="helper"></span><img src="https://i.stack.imgur.com/5ZNYR.png">
</div>
<div class='container' style="width:400px;height:200px">
  <span class="helper"></span><img src="https://i.stack.imgur.com/5ZNYR.png">
</div>
<div class='container' style="width:200px;height:400px">
  <span class="helper"></span><img src="https://i.stack.imgur.com/5ZNYR.png">
</div>

.container {
width: 200px;
    height: 100px;
    background-image: url("https://i.stack.imgur.com/5ZNYR.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-color: blue;
}

<div class='container'></div>

<div class="img-con">
<img src="http://www.mybligr.com/wp-content/uploads/2017/01/most-beautiful-tiger-animals-pics-images-photos-pictures-6.jpg" alt="" />
</div>

.img-con
{
  height:300px;
  width:500px;
  border:1px solid black;
  position: relative;
  max-height:300px;
  max-width:500px;
  padding:30px;
}

.img-con > img
{
  position: absolute;
  left:0;
  right: 0;
  top:0;
  bottom:0;
  margin:auto;
  max-height:inherit;
  max-width:inherit;
}