在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML5  HTML/ css 怎么控制圖片不變形

css 怎么控制圖片不變形

在做一個(gè)小程序的需求:就是讓后臺(tái)穿過的img的數(shù)據(jù)顯示不變形,但是設(shè)計(jì)給的效果是 70乘70,后臺(tái)傳過的img的尺寸不固定 可能是100乘200、或者80乘120 等等人物的頭像。有什么解決的方法可以解決穿過的圖片不變形嗎在對(duì)應(yīng)的70*70的容器里面,或者怎么剪裁只限制只顯示頭像部分也可以,我試驗(yàn)image的mode里面的屬性,但是都不盡如意,有做過的大神請(qǐng)指教一下 謝謝。

回答
編輯回答
安若晴

object-fit 會(huì)有兼容性的問題
用js 把圖片獲取src做成背景圖片(隱藏img) 然后給容器背景使用cover是最保險(xiǎn)的做法
一定要用img 那就要判斷這張圖片是水平的還是垂直的 然后分別對(duì)應(yīng)不同的css 比如垂直的 就絕對(duì)定位 寬度100% 高度自動(dòng) 然后用css垂直居中

2017年7月7日 00:44
編輯回答
念初

目前的解決的方法就是在image的mode屬性中定義widthFix保持原圖寬高比不變,然后在外面嵌套一個(gè)標(biāo)簽給定width和height 添加overflow: hidden; 這樣就可以顯示上半部分

2017年4月20日 01:27
編輯回答
任她鬧

補(bǔ)充以上,不變形的話,可以固定一邊,另一邊auto

2017年5月25日 09:00
編輯回答
未命名

要是能把圖片img換成固定的背景就能用background covet,如果還是img那應(yīng)該只能設(shè)固定寬高吧,不然就要用ps改一下原本圖片的寬高吧

2018年9月4日 19:34
編輯回答
喜歡你

首先我說一句,你上傳圖片的時(shí)候不做限制,無論怎么改,總有另一部分的圖片是會(huì)看上去不符合的。
然我我寫圖片是判斷一下圖片的寬高比,然后按小的那個(gè)100%,另一個(gè)auto。
我傳個(gè)1000px*1px的圖上去,怎么辦,對(duì)吧,所以最后強(qiáng)調(diào)一局,上傳圖片的時(shí)候就讓他們按照規(guī)則來,不然怎么可能什么圖片都可以不變形。你自己寫好代碼然后給他們一個(gè)規(guī)則,

2018年9月10日 05:59
編輯回答
絯孑氣
<div calss="wrapper">
    <img>
</div>
.wrapper {
    height: 70px;
    width: 70px;
}

img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

之前的寫錯(cuò)了

2017年4月5日 12:02