前端css图片固定宽高问题

img需要宽高都固定时，图片往往会因此变形，此时可采用的方法有：

<div class="container">
  <img src="http://images.9liuda.com/image/201807/20/3bad7b83de0656dcb1c3af07d0675c67">
</div>
.container {
  overflow: hidden;
  position: relative;
  width: 200px;
  height: 200px;
  background:black;
}
.container > img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
 }
//top: 50%;left: 50%;， 是以左上角为原点，故不处于中心位置
//translate(-50%,-50%) 作用是，往上（x轴）,左（y轴）移动自身长宽的 50%，以使其居于中心位置

上述代码会使得图片居中，边缘部分不显示。这是在图片大小跟container大小差不多的情况下。如果图片很大的话，只显示中心部分是不行的。
此时，设置width：100%；或者height：200px;都可以。
设置width百分之百，会让高都裁剪或填充黑色。设置height固定值会让宽度裁剪或填充。