文章詳情頁
css3 - 圖片等比例縮放
瀏覽:171日期:2023-07-15 14:52:57
問題描述
要將千奇百怪(尺寸)的圖片放在一個固定寬高的p/a標簽中,如何保持圖片不變形以及能讓用戶看到關鍵信息(裁剪掉冗余部分),其實我個人想法是對上傳過來的圖片統一壓縮成我想要的尺寸,這個怎么實現?
問題解答
回答1:不確定你需要的關鍵信息是什么,但是如果這里的關鍵信息都包含了圖片的“中央”,那么居中顯示圖片即可,給固寬高的元素指定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的高寬實現自適應……
標簽:
CSS
相關文章:
1. javascript - vscode alt+shift+f 格式化js代碼,通不過eslint的代碼風格檢查怎么辦。。。2. javascript - 如何將一個div始終固定在某個位置;無論屏幕和分辨率怎么變化;div位置始終不變3. html5 - 有可以一次性把所有 css外部樣式轉為html標簽內style=" "的方法嗎?4. javascript - 有什么比較好的網頁版shell前端組件?5. java - 如何寫一個intellij-idea插件,實現編譯時修改源代碼的目的6. javascript - 原生canvas中如何獲取到觸摸事件的canvas內坐標?7. java 中Long 類型如何轉換成Double?8. javascript - 求解答:實例對象調用constructor,此時constructor內的this的指向?9. html - vue項目中用到了elementUI問題10. javascript - [js]為什么畫布里不出現圖片呢?在線等
排行榜
