css3 - 图片等比例缩放

Question

要将千奇百怪（尺寸）的图片放在一个固定宽高的div/a标签中，如何保持图片不变形以及能让用户看到关键信息（裁剪掉冗余部分），其实我个人想法是对上传过来的图片统一压缩成我想要的尺寸，这个怎么实现？

黄舟 · Answer

不确定你需要的关键信息是什么，但是如果这里的关键信息都包含了图片的“中央”，那么居中显示图片即可，给固宽高的元素指定background。以下就是让图片等比居中布满整个元素，多余的部分会被裁减：

.image-container {
    ...
    background-image: url(your/path/to/image.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    ...
}

ringa_lee · Answer

如果你图片在一个p标签里面，而这个p又设置好了高宽，可以通过设置图片的background-size:100% 100%，来将图片根据p的高宽实现自适应……