文章詳情頁
css - PC端img適配的問題
瀏覽:100日期: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. android - 用textview顯示html時如何寫imagegetter獲取網絡圖片2. javascript - table列過多,有什么插件可以提供列排序和選擇顯示列的功能3. showpassword里的this 是什么意思?代表哪個元素4. javascript - windows下如何使用babel,遇到了困惑5. JavaScript事件6. python - 為什么正常輸出中文沒有亂碼,zip函數之后出現中文編程unicode編碼的問題,我是遍歷輸出的啊。7. javascript - js中向下取整8. android - rxjava多線程并發怎么控制順序9. 對mysql某個字段監控的功能10. html - vue項目中用到了elementUI問題
排行榜
