css固定图片大小 vue_css3 实现图片等比例放大与缩小

css3 实现图片等比例放大与缩小

在工作中，经常会碰到图片缩放的情况，比如服务器端返回的图片大小，可能大小不同，有的大，有的小，服务器端返回的图片大小我们不能控制的，但是在我们设计稿的时候，可能会规定每张图片的大小为固定的宽度和高度，比如200px*200px这样的。我们这边使用的是背景图片来做的，

但是如果直接使用 img标签这样引入图片貌似不行，因此我们目前只能使用背景图片来做。对于大一点的图片我们可以缩放的，但是对于很小

很小的图片，我们把他们拉伸的话，可能会有点点模糊，但是一般的情况下是不会有这种情况，因为对于图片的缩放，服务器端不太可能会返回

一张很小很小的图片回来，一般都是比较大的。

1. 等比例缩放(1:1)

我们先来看看实现图片等比例缩放的情况下：

html代码如下：

css代码如下：

.demo1-1 {

float: left;

width: 200px;

height: 200px;

overflow: hidden;

}

.zoomImage {

width: 100%;

height: 0;

padding-top: 100%;

overflow: hidden;

background-position: center center;

background-repeat: no-repeat;

background-size: cover;

-