css3 - 图片等比例缩放

Question

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

Answer 1

Not sure what the key information you need is, but if the key information here includes the "center" of the image, then just display the image in the center and specify a background for the elements with a fixed width and height. The following is to center the image to fill the entire element in equal proportions, and the excess part will be cut:

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

Answer 2

If your image is in a p tag, and the p has a set height and width, you can adjust the image according to the height and width of the p by setting the background-size: 100% 100% of the image...