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

最新推荐文章于 2024-07-05 09:52:23 发布

PerkinsLi

最新推荐文章于 2024-07-05 09:52:23 发布

阅读量736

点赞数

分类专栏： css

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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

在做响应式时使用了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
本文引自上面链接文章，感谢博主的文章让我解决了问题。