PTT數位生活區 / Web_Design

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

看板Web_Design作者 (kkk)時間3年前 (2021/07/31 17:02), 編輯推噓1(1推 0噓 4→)
留言5則, 2人參與, 3年前最新討論串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, 3年前 , 1F
只變高度嗎？這樣圖片怎麼會比例轉變？
08/02 03:07, 1F
→
08/02 03:07, 3年前 , 2F
不知道把width設定好60%40%可不可行，要看文字區塊內容打
08/02 03:07, 2F
→
08/02 03:07, 3年前 , 3F
算怎麼處理，目前想到word-wrap或是flex應該都好處理。
08/02 03:07, 3F
→
08/02 03:07, 3年前 , 4F
圖片置中也可以用flex操作。
08/02 03:07, 4F
→
08/02 16:37, 3年前 , 5F
定好容器寬，img 用 object-fit 處理
08/02 16:37, 5F
‣ 更多 mate99 的文章
文章代碼(AID): #1X1H6Iz- (Web_Design)
Web_Design 近期熱門文章
更多 近期熱門文章 >>
PTT數位生活區 即時熱門文章
更多 即時熱門文章 >>
‣ 更多 mate99 的文章
文章代碼(AID): #1X1H6Iz- (Web_Design)