1. 程式人生 > >圖片太大時不會出現橫向滾動條

圖片太大時不會出現橫向滾動條

兩種方法實現圖片超過解析度但不出現橫向滾動條

我們在進行網頁頁面佈局的時候經常會遇到圖片大於螢幕的解析度的問題,如果不進行處理就會出現橫向滾動條,十分影響使用者的體驗,而如果直接將圖片寬度設定為螢幕的100%時在進行頁面的放大縮小時或者在不同解析度下圖片就會被拉長或者鋸斷,十分難看,本文就對此提出兩種十分簡單的解決方法。
第一種簡單的思路,就是在img圖外層“包”一層(或者多層)標籤,然後使這個容器的寬度width為100%,這樣有人就會問了,如果我的圖超過解析度,不還是會出現橫向滾動條嗎?的確,但我們的操作並沒有做完,很明顯當裡面內容大於解析度的時候相當於有部分已經逸出了,所以需要我們在設定容器的寬度width為100%時同時使逸出隱藏overflow:hidden,就像下面這麼寫:在這裡插入圖片描述


就可以使不出現橫向滾動條。
第二種思路,我們將圖作為背景圖插入,就像這樣:在這裡插入圖片描述
也可以實現我們需要的不出現橫向滾動條且圖片不會放大縮小變形的效果。(注:背景圖插入時候沒有內容的話需要給容器設定高度不然高度為0看不到效果)