[css] fixed 區塊 img 長方形圖片 overflow 設定

css overflow

Zaku 2018-09-01 23:00:21 ‧ 5763 瀏覽

分享至

假定我想讓fixed區塊內的圖片寬度不超出瀏覽範圍，但高度不限制讓他overflo:scroll;，
但發現它破出區塊，滾動效果沒有出來

html

<div class="main">
    <div class="rang">
        <img src="img.jpg">
    </div>
</div>

css

img {
  width:100%;
  //heught: 100% 測試他社100%也是不起作用應該跟寬度衝突
}

.main{
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

.rang{
    width:80%
    margin: auto;
    overflow: auto; //沒做用
}

marlin12 iT邦研究生 5 級 ‧ 2018-09-02 11:45:20 檢舉

你要定出有多高，它才可以決定是否scroll
.rang{
width:80%
height:300px;
margin: auto;
overflow: auto;
}

Zaku iT邦新手 3 級 ‧ 2018-09-05 00:07:29 檢舉

原來如此感謝大大，設高度有什麼策略嗎

marlin12 iT邦研究生 5 級 ‧ 2018-09-07 23:02:42 檢舉

如果你想圖片窗口的高和闊度維持固定的比例，它們的CSS單位可以都用rem或者vw。如果你想做到responsive(即是窗口的大小跟隨屏幕的大小)，你可以在CSS加入相關的media query(https://www.w3schools.com/css/css_rwd_mediaqueries.asp)。

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

1 個回答

犬千賀

iT邦新手 3 級 ‧ 2018-10-17 12:55:50

.main{
    position: sticky;
    top: 0; // 高度(必須)
}

回應
分享
檢舉

登入發表回應

我要發表回答

立即登入回答

參賽組數

1064 組

團體組數

40 組

累計文章數

22178 篇

完賽人數

597 人

15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js

IT邦幫忙