iT邦幫忙

0

區塊根據父寬度縮小放大?

  • 分享至 

  • xImage

https://www.airbnb.com/s/Oregon/homes?refinement_paths%5B%5D=%2Fhomes&allow_override%5B%5D=&s_tag=jHDRCb4m

我發現 airbnb 一個東西我想研究但是偷不走
我知道是 flex 相關技術
只是他的又更特別
進去的時候你應該會看到五個 col 的房屋資訊,有好幾row
瀏覽器先把寬度拉到最小~變成手機版
此時會剩下一個
然後往右開始拖拉直到有兩個 col
從這裡開始再往右拉到有四個 col 的時候
這段期間的變化實在是想不透
很明顯外面的 div 跟裡面的圖片寬度是一致的
隨著父的寬度會等比例放大
這到底是怎麼做到的?!
他的 div 跟圖片不知道是怎麼設定的,父拉寬的時候,圖片跟DIV都會往右下角放大

watercool iT邦新手 5 級 ‧ 2018-12-05 11:00:04 檢舉
Div跟圖片寬度設百分比就會跟著跑了
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中
1
bizpro
iT邦大師 1 級 ‧ 2018-12-04 20:34:19
最佳解答

airbnb用的不是flexbox. 是向bootstrap 3.0.0借來的, 答案在這裡:
https://a0.muscache.com/airbnb/static/packages/dls/common_o2.1_cereal-871c66c183c790878ff8fa1028479c88.css
https://a0.muscache.com/airbnb/static/packages/common-109e89402850da21ca03bf46aa9b1ed0.css

用@media依據螢幕寬度(744px和1127px)來動態改變CSS, 產生您看到的效果.

請用開發者工具來追蹤.

另, bootstrap 4.0事實上是flexbox. 基本上可以不用bootstrap

看更多先前的回應...收起先前的回應...
火爆浪子 iT邦研究生 1 級 ‧ 2018-12-04 21:43:08 檢舉

我知道 @media ,但是他的是這段期間縮放的時候,那個div和圖片都會等比例放大

bizpro iT邦大師 1 級 ‧ 2018-12-04 22:02:50 檢舉

例如:

<div style="width: 100%; height: 100%; background-image: url(&quot;https://a0.muscache.com/im/pictures/72214f77-d7db-4a29-a65e-09d736710920.jpg?aki_policy=large&quot;);" role="img" aria-label="Saul Zaik Treehouse!" class="_1df8dftk"></div>

使用background-image, 然後以CSS:
background-repeat: no-repeat !important;
來resize圖片.

bizpro iT邦大師 1 級 ‧ 2018-12-04 22:03:03 檢舉

要使用開發者工具追追蹤, 用了許多animation.

火爆浪子 iT邦研究生 1 級 ‧ 2018-12-04 22:09:37 檢舉

好像跟這個沒有關係,我原本就有宣告這個了

火爆浪子 iT邦研究生 1 級 ‧ 2018-12-04 22:10:07 檢舉

他的 div 跟圖片不知道是怎麼設定的,父拉寬的時候,圖片跟DIV都會往右下角放大

火爆浪子 iT邦研究生 1 級 ‧ 2018-12-05 00:52:53 檢舉

那他的外圍 div 是怎麼跟著往右下角走?

bizpro iT邦大師 1 級 ‧ 2018-12-05 07:49:28 檢舉

我昨晚傳了兩個訊息不見了?
圖片: html: background-image; css: background-repeat: no-repeat !important;
DIV: box-sizing
https://www.w3schools.com/css/css3_box-sizing.asp
https://css-tricks.com/international-box-sizing-awareness-day/
https://css-tricks.com/box-sizing/

watercool iT邦新手 5 級 ‧ 2018-12-05 10:14:02 檢舉

https://jsfiddle.net/5mb208hL/2/

不知道這是不是你想要的

火爆浪子 iT邦研究生 1 級 ‧ 2018-12-05 12:04:19 檢舉

所以前提是圖片本身要是固定的大小,比如說 200x200

watercool iT邦新手 5 級 ‧ 2018-12-05 12:32:09 檢舉

跟著放大只要div跟img的width屬性設百分比就好了,不用管圖片大小,我貼的jsfiddlen不是你想要的結果嗎?

1
CSScoke
iT邦新手 3 級 ‧ 2018-12-05 10:24:08

使用CSS媒體查詢寫的,你可以看一下這篇的示範
https://ithelp.ithome.com.tw/articles/10206534

0

其實,這就是一種RWD的知識應用。

認真來說,你想要了解的心態不錯。不過對你來說還太早就是了。

一般rwd就是要了解所謂的主框架跟子框架的對應。
再搭配@media取代應用。

一般來說,如果需要更多元化的視覺效果。大多還是得要利用到js程式碼。
這裏一般來說。我會叫你去研究bootstrap來幫你處理就好。
這樣就不需要去寫更多架構應用的js程式碼。

但如果你真想要了解,你得要面臨非常多的空間應用學及架構應用。
也要學習到圖層、box屬性跟比例計算超多的長寬計算方式。

這些東西,其實有些認真來說,已經不太算是程式的領域。比較偏向美工排版的領域了。

大多數而言,如果一般開發案,沒那個時間研究的話。還是用bootstrap拉一拉讓它自已跑就行了。
至於你可能會說bootstrap拉一拉或不會拉。那就是要靠自已的功力學了。

我只能說,如果你bootstrap不會拉的情況下。那自刻的部份你更不要想去學。因為那是更複雜的東西。學好bootstrap就行了。

我要發表回答

立即登入回答