CSS圖片等比例縮小是一種很常見的需求，特別是在響應(yīng)式設(shè)計(jì)中。下面介紹幾種方法來實(shí)現(xiàn)。

/* 方法一 */
img{
max-width: 100%; /* 最大寬度為100% */
height: auto; /* 自動(dòng)高度調(diào)整 */
}
/* 方法二 */
.wrapper{
width: xx%; /* 容器寬度 */
position: relative;
}
.wrapper img{
max-width: 100%;
height: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
/* 方法三 */
.wrapper{
width: xx%; /* 容器寬度 */
position: relative;
}
.wrapper:before{
content: "";
display: block;
padding-top: yy%; /* 高度為寬度的yy% */
}
.wrapper img{
max-width: 100%;
height: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}

以上三種方法效果基本相同，只是實(shí)現(xiàn)方式不同。注意，在使用方法二和方法三時(shí)，需要設(shè)置容器的寬度，且需要使用相對(duì)定位。