[問題] 圖片隨文字高度等比縮放

看板Web_Design作者 (kkk)時間2年前 (2021/07/31 17:02), 編輯推噓1(104)
留言5則, 2人參與, 2年前最新討論串1/2 (看更多)
如標題所述 在同一列上面左邊欄位的文字行數會隨後端傳遞的資料多寡,高度會改變, 文字欄位跟圖片欄位寬度比例是2:1,因為儲存的圖片大小不一, 希望右欄圖片可依照左邊文字欄位行數的高度,來自動等比例縮放且置中 請問該怎麼寫CSS來達成這個功能. 以下附上測試的程式碼片段. <div class='row'> <div class='col-8'> {% for item in content %} <p>{{item}}</p> {% endfor %} </div> <div class='col-4'> <img src={% static picture %}> </div> </div> -- ※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 118.69.234.112 (越南) ※ 文章網址: https://www.ptt.cc/bbs/Web_Design/M.1627722130.A.F7E.html

08/02 03:07, 2年前 , 1F
只變高度嗎?這樣圖片怎麼會比例轉變?
08/02 03:07, 1F

08/02 03:07, 2年前 , 2F
不知道把width設定好60%40%可不可行,要看文字區塊內容打
08/02 03:07, 2F

08/02 03:07, 2年前 , 3F
算怎麼處理,目前想到word-wrap或是flex應該都好處理。
08/02 03:07, 3F

08/02 03:07, 2年前 , 4F
圖片置中也可以用flex操作。
08/02 03:07, 4F

08/02 16:37, 2年前 , 5F
定好容器寬,img 用 object-fit 處理
08/02 16:37, 5F
文章代碼(AID): #1X1H6Iz- (Web_Design)
文章代碼(AID): #1X1H6Iz- (Web_Design)