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的高寬實現自適應…