[爆卦]css width自動調整是什麼?優點缺點精華區懶人包

為什麼這篇css width自動調整鄉民發文收入到精華區:因為在css width自動調整這個討論話題中,有許多相關的文章在討論,這篇最有參考價值!作者energizer (A23)看板Web_Design標題[請益]讓 圖片自動調整大小位置的問題...



我是新手想請教如何在不同的裝置自動調整圖片大小及位置。

我的圖片是直立的A4紙掃描的,希望寬度可以滿格,但高度又不可以超過營幕,也就是會有

1. 營幕較矮胖 → 圖片高度滿格,左右置中。
2. 營幕較瘦長 → 圖片寬度滿格,上下置中。

請問這個應該怎麼用 CSS 寫出來,感恩 :)

更新:
網路上有很多做法,其中有一個我試了可以

https://codepen.io/hoisee/pen/BEVavO


謝謝各位熱心的幫忙。
我現在還有一個問題無法解決,我想把所有包含圖片的div用一個div包起來然後設定背景顏色,這個div的寬度要比圖片寬一點點,但一直無法辦到,似乎是因為我的圖片沒有指定大小。請問我該如何才能辦到,謝謝 :)



-----
Sent from JPTT on my BullittGroupLimited S60.

--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 101.14.144.88
※ 文章網址: https://www.ptt.cc/bbs/Web_Design/M.1555710537.A.CAD.html
pkro12345: https://codepen.io/anon/pen/XQqOwG04/20 06:35
energizer: 我的圖片有幾十張依序排列,用手swipe up/down 會自動04/20 07:11
energizer: 定位顯示上下的圖片。這樣似乎不適合用 background-ima04/20 07:11
energizer: ge 。 04/20 07:11
pkro12345: 你直接貼codepen吧 04/20 07:22
mackliu: 你的需求一次說完整,還要swipe的話,可能要加js控制, 04/20 09:28
mackliu: 多張圖和單張圖的狀況不太一樣,是一次多張還是一次單張? 04/20 09:29
energizer: 圖片是從上到下依序排列,拉動捲軸可瀏覽全部的圖片, 04/20 14:44
energizer: 但螢幕一次只看到一張,swipe up 會自動慢慢滑到下一張 04/20 14:44
energizer: 。swipe 功能我已經用 js 寫好了, 現在就剩圖片如何在 04/20 14:44
energizer: 不同裝置可以達到我說的效果。謝謝各位的幫忙 :) 04/20 14:44
konkonchou: 用js抓img長寬去跟螢幕解析長寬互動 04/20 15:14
konkonchou: 去決定 height 或 width 哪一項等於螢幕便可 04/20 15:16
eight0: object-fit https://is.gd/ti6CVq 04/20 15:31
※ 編輯: energizer (218.35.75.245), 04/20/2019 17:41:18
※ 編輯: energizer (218.35.75.245), 04/20/2019 17:54:18
foolray: display:table +max-width:00vw 跟max-height:00vh 04/21 07:08

你可能也想看看

搜尋相關網站