使用css响应式缩放裁剪图片

首先说需求：
后台取到的图片宽高格式不定，前台显示时要显示为一致的大小，即显示时宽高一致，在手机端和电脑端不能使图片拉伸变形。

在做响应式时使用了bootstrap的响应式布局栅格，因此宽度一致很好解决，但是高度如何做成一致呢？如果将高度写死，那么图片就会变形。

解决方法：

将图片以div背景图片的形式显示，

<div class="category-img-border" [ngStyle]="{'background-image': 'url('+category.imgUrl+')'}" ></div>

.category-img-border{
    width:100%;
    height:0;
    padding-bottom: 100%;
    overflow:hidden;
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-background-size:cover;
    -moz-background-size:cover;
    background-size:cover;
}

如上所示， 重点是css代码，当宽度一致时，使用padding-bottom：100%， 高度也会一致，因为padding为百分比的时候，是以高度的值来计算的。 而 background-size:cover 则使图片完全覆盖div，background-position: center center; 使的图片居中。

注：https://blog.csdn.net/oulihong123/article/details/54601030
本文引自上面链接文章，感谢博主的文章让我解决了问题。