問題描述

1.移動端怎么樣讓圖片寬高比例正好適應(yīng)手機(jī)當(dāng)前屏幕全屏大小？

當(dāng)寬度100%時高度就需要自適應(yīng)，當(dāng)高度100%時寬度就需要自適應(yīng)，

這樣就可能圖片超出當(dāng)前屏幕出現(xiàn)滾動條，需要滑動才能看到，或者就會出現(xiàn)留白，沒有充滿整屏。

因?yàn)楫?dāng)前圖片不是同種顏色背景，無法通過填充背景來實(shí)現(xiàn)，有沒有好的圖片尺寸比例可以實(shí)現(xiàn)這種需求。

2.代碼

.imgsrc img { width: 100%;}

3.效果

問題解答

根據(jù)需求來看，建議通過css的背景屬性來設(shè)置；第一步，先添加一個屏幕大小的DOM元素；或者直接在你的imgsrc上設(shè)置，前提是imgsrc的大小是屏幕大小；第二步：設(shè)置元素的css屬性：一樓說的是下面這種，不會拉伸圖片；通過調(diào)整background-position這個屬性來控制圖片位置，我也推薦這種寫法：

background-image: url(’鏈接’); background-size: cover; background-repeat: no-repeat; background-position: center;

下面這種可以將圖片完全展示出來，但會將拉伸背景圖片，如果沒有鎖定屏幕，橫屏?xí)r圖片會被拉伸的比較嚴(yán)重：

background-image: url(’鏈接’); background-size: 100% 100%;

===============================================既不拉伸圖片又要完全展示，真是執(zhí)著于這個的話，給設(shè)計(jì)提個參考方案吧：把圖片的輪廓羽化后，加個背景色，再去拿到圖片背景色的色值，在imgsrc或是加上的DOM元素中，設(shè)置css屬性：

background-color: white;// 拿到的圖片背景色 background-image: url(’鏈接’); background-size: 95%; //可以寫成固定值 background-repeat: no-repeat; background-position: center;回答2：

很多種方式可以實(shí)現(xiàn)。除去 js 計(jì)算不說， <img> 標(biāo)簽可以用比較新的 object-fit: cover; 屬性。

或者把圖片放到背景里，再利用 background-size: cover; ，這種方式還可以通過百分比的 background-position 指定焦點(diǎn)，可以保持焦點(diǎn)的地方一直可見。

不是同種顏色背景是什么意思，可以描述的清楚些么？

將圖片作為背景圖，設(shè)置background-size:cover。

width： 100vw；height： 100vh；但是不兼容ie低版本