文章詳情頁
css - PC端img適配的問題
瀏覽：125日期：2023-01-16 15:58:53
問題描述
為了防止圖片變形，規定了<img>標簽的width:100%;height:auto;但是，這樣會出現兩種情況:1、圖片高度無法填充滿容器2、圖片高度大于容器的高度針對第二個問題，我直接規定容器overflow:hidden;但是，第一個問題該如何解決，如果將<img>高度設置為100%的話，就會變形.請大神們幫忙解答..
問題解答
回答1：用p代替img 使用background-size:100%;
回答2：圖片不變形就需要保證其橫縱比->容器與圖片橫縱比相同->不可修改圖片就需要重新規劃布局
可修改圖片從而達到圖片不“變形” 將圖片采用background-image
回答3：再提供另一種方案，即容器固定，圖片自適合：
img { max-width: 100%; max-height: 100%;}回答4：
可以嘗試下樓上的方案，如果不行就需要用JS獲取圖片寬高再進行判斷動態設置width：100%或者height：100%
標簽：
CSS
相關文章：
1. win下面的cmder中的vim . 中文亂碼. 試了百度上的各種解決方式.. 還是沒弄好2. PHP中的$this代表當前的類還是方法？3. win10系統 php安裝swoole擴展4. node.js - 為什么npm安裝vue-cli會出現下面的錯誤??!!!?5. 前端 - IE9 css兼容問題6. css3 content icon7. javascript - 關于ios微信端瀏覽器網頁的一些問題8. css3 - CSS偽類選擇器，如何選擇并控制相鄰的上一個標簽？9. javascript - bootstrap table固定列之后寬度無法對齊怎么解決？10. css - 如何讓圖片像雲一樣的行為？
排行榜
網公網安備