文章詳情頁
css3 - 圖片等比例縮放
瀏覽：323日期：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. mac里的docker如何命令行開啟呢？2. 關docker hub上有些鏡像的tag被標記““This image has vulnerabilities””3. nignx - docker內nginx 80端口被占用4. docker容器呢SSH為什么連不通呢？5. 為什么我ping不通我的docker容器呢？？？6. Docker for Mac 創建的dnsmasq容器連不上/不工作的問題7. angular.js使用$resource服務把數據存入mongodb的問題。8. docker-compose 為何找不到配置文件？9. javascript - 最近用echarts做統計圖時遇到兩個問題！！10. docker gitlab 如何git clone？
排行榜
網公網安備