iT邦幫忙

0

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

Zaku 2018-09-01 23:00:215771 瀏覽
  • 分享至 

  • xImage

假定我想讓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 }} |
{{ formatDate(item.duration) }}
直播中

1 個回答

0
犬千賀
iT邦新手 3 級 ‧ 2018-10-17 12:55:50
.main{
    position: sticky;
    top: 0; // 高度(必須)
}

我要發表回答

立即登入回答