[請益]讓 圖片自動調整大小位置的問題

看板Web_Design作者 (A23)時間5年前 (2019/04/20 05:48), 5年前編輯推噓3(3推 0噓 12→)
留言15則, 6人參與, 5年前最新討論串1/1
我是新手想請教如何在不同的裝置自動調整圖片大小及位置。 我的圖片是直立的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
推
04/20 06:35, 5年前 , 1F
04/20 06:35, 1F
→
04/20 07:11, 5年前 , 2F
我的圖片有幾十張依序排列，用手swipe up/down 會自動
04/20 07:11, 2F
→
04/20 07:11, 5年前 , 3F
定位顯示上下的圖片。這樣似乎不適合用 background-ima
04/20 07:11, 3F
→
04/20 07:11, 5年前 , 4F
ge 。
04/20 07:11, 4F
→
04/20 07:22, 5年前 , 5F
你直接貼codepen吧
04/20 07:22, 5F
→
04/20 09:28, 5年前 , 6F
你的需求一次說完整,還要swipe的話,可能要加js控制,
04/20 09:28, 6F
→
04/20 09:29, 5年前 , 7F
多張圖和單張圖的狀況不太一樣,是一次多張還是一次單張?
04/20 09:29, 7F
→
04/20 14:44, 5年前 , 8F
圖片是從上到下依序排列，拉動捲軸可瀏覽全部的圖片，
04/20 14:44, 8F
→
04/20 14:44, 5年前 , 9F
但螢幕一次只看到一張，swipe up 會自動慢慢滑到下一張
04/20 14:44, 9F
→
04/20 14:44, 5年前 , 10F
。swipe 功能我已經用 js 寫好了, 現在就剩圖片如何在
04/20 14:44, 10F
→
04/20 14:44, 5年前 , 11F
不同裝置可以達到我說的效果。謝謝各位的幫忙 ：)
04/20 14:44, 11F
→
04/20 15:14, 5年前 , 12F
用js抓img長寬去跟螢幕解析長寬互動
04/20 15:14, 12F
→
04/20 15:16, 5年前 , 13F
去決定 height 或 width 哪一項等於螢幕便可
04/20 15:16, 13F
推
04/20 15:31, 5年前 , 14F
04/20 15:31, 14F
※ 編輯: energizer (218.35.75.245), 04/20/2019 17:41:18 ※ 編輯: energizer (218.35.75.245), 04/20/2019 17:54:18
推
04/21 07:08, 5年前 , 15F
display:table +max-width:00vw 跟max-height:00vh
04/21 07:08, 15F
‣ 更多 energizer 的文章
文章代碼(AID): #1Ska99oj (Web_Design)