css3 - 图片等比例缩放

问题描述

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

问题解答

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

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

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