問題描述

要將千奇百怪（尺寸）的圖片放在一個(gè)固定寬高的p/a標(biāo)簽中，如何保持圖片不變形以及能讓用戶看到關(guān)鍵信息（裁剪掉冗余部分），其實(shí)我個(gè)人想法是對(duì)上傳過來(lái)的圖片統(tǒng)一壓縮成我想要的尺寸，這個(gè)怎么實(shí)現(xiàn)？

問題解答

不確定你需要的關(guān)鍵信息是什么，但是如果這里的關(guān)鍵信息都包含了圖片的“中央”，那么居中顯示圖片即可，給固寬高的元素指定background。以下就是讓圖片等比居中布滿整個(gè)元素，多余的部分會(huì)被裁減：

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

如果你圖片在一個(gè)p標(biāo)簽里面，而這個(gè)p又設(shè)置好了高寬，可以通過設(shè)置圖片的background-size:100% 100%，來(lái)將圖片根據(jù)p的高寬實(shí)現(xiàn)自適應(yīng)……