css - PC端img適配的問題

問題描述

為了防止圖片變形，規定了<img>標簽的width:100%;height:auto;但是，這樣會出現兩種情況:1、圖片高度無法填充滿容器2、圖片高度大于容器的高度針對第二個問題，我直接規定容器overflow:hidden;但是，第一個問題該如何解決，如果將<img>高度設置為100%的話，就會變形.請大神們幫忙解答..

問題解答

用p代替img 使用background-size:100%;

圖片不變形就需要保證其橫縱比->容器與圖片橫縱比相同->不可修改圖片就需要重新規劃布局

可修改圖片從而達到圖片不“變形” 將圖片采用background-image

再提供另一種方案，即容器固定，圖片自適合：

img { max-width: 100%; max-height: 100%;}回答4：

可以嘗試下樓上的方案，如果不行就需要用JS獲取圖片寬高再進行判斷動態設置width：100%或者height：100%