新聞中心
假如有一天,你老板給你一些帥氣照片,他希望發(fā)布在公司自己網(wǎng)站上面,且希望能兼容其它端。 但2個(gè)月后,他在手機(jī)上打開(kāi)網(wǎng)站,看到他的帥氣圖像被壓成一個(gè)小盒子,或者圖像被不成比例地壓扁,他略微生氣跟你(前端)說(shuō),給你半天的時(shí)間,立馬解決。如果解決不了,那在給你半天的時(shí)間。

成都創(chuàng)新互聯(lián)公司主營(yíng)云浮網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營(yíng)網(wǎng)站建設(shè)方案,重慶APP開(kāi)發(fā)公司,云浮h5重慶小程序開(kāi)發(fā)搭建,云浮網(wǎng)站營(yíng)銷推廣歡迎云浮等地區(qū)企業(yè)咨詢
對(duì)于剛?cè)腴T的不久的前端小伙伴可能給他一個(gè)禮拜也解決不了,因?yàn)橐嫒菟械亩?,這時(shí)候他要怎么辦呢?這里有一種方案,可以解決所有屏幕大小、所有卡片大小或任何其他用例上的問(wèn)題,我們來(lái)看看這個(gè)萬(wàn)能的方法。
默認(rèn)行為
將圖像導(dǎo)入到我們的組件中,然后將其放在頁(yè)面上,下面是正常默認(rèn)的情況:
在不同的視口上,圖片隨著屏幕的變化而變化。在不同的消費(fèi)設(shè)備上有超過(guò)10,000種不同的屏幕尺寸。有小到360px寬的手機(jī)。有5k臺(tái)imac,也有 4k電視,這么多尺寸,我們要怎么去適配圖片呢?
把外圍容器的大小寫死怎么樣?
我們可以將圖片的包裹元素的大小寫死,如:
- .img-container {
- width: 700px;
- height: 450px;
- }
- .image{
- width: 100%;
- height: 100%
- }
這會(huì)比剛開(kāi)始的好的多了,圖像不再隨視口的大小進(jìn)行縮放,視口變大的時(shí)候,圖片也只顯示外圍容器設(shè)置的大小。 但是,如果視口太小,則會(huì)切除圖像的底部。
另外,如果用戶使用的是大屏幕,則該圖像不會(huì)自動(dòng)按比例放大或縮小,因此生成的設(shè)計(jì)中的圖像可能太大或太小。
CSS有一些內(nèi)置的特性來(lái)幫助我們
我們來(lái)試試另一種方法。不需要將圖像導(dǎo)入到組件中,直接在CSS文件中引用它:
本文轉(zhuǎn)載自微信公眾號(hào)「大遷世界」,可以通過(guò)以下二維碼關(guān)注。轉(zhuǎn)載本文請(qǐng)聯(lián)系大遷世界公眾號(hào)。
網(wǎng)站標(biāo)題:一次解決你的圖像尺寸和定位問(wèn)題
網(wǎng)站URL:http://www.dlmjj.cn/article/dpsihgp.html


咨詢
建站咨詢
