文章詳情頁
css3 - 圖片等比例縮放
瀏覽:136日期: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. objective-c - ios百度地圖定位問題2. html5 - 如何解決bootstrap打開模態modal窗口引起頁面抖動?3. javascript - 求助關于js正則問題4. javascript - node.js服務端渲染解疑5. javascript - 求助這種功能有什么好點的插件?6. html5 - rudy編譯sass的時候有中文報錯7. html - css 如何添加這種邊框?8. 為何 localStorage、sessionStorage 屬于html5的范疇,但是為何 IE8卻支持?9. 微信開放平臺 - Android調用微信分享不顯示10. javascript - 關于定時器 與 防止連續點擊 問題
排行榜
