看板 Web_Design 關於我們 聯絡資訊
如標題所述 在同一列上面左邊欄位的文字行數會隨後端傳遞的資料多寡,高度會改變, 文字欄位跟圖片欄位寬度比例是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
sjensen: 只變高度嗎?這樣圖片怎麼會比例轉變? 08/02 03:07
sjensen: 不知道把width設定好60%40%可不可行,要看文字區塊內容打 08/02 03:07
sjensen: 算怎麼處理,目前想到word-wrap或是flex應該都好處理。 08/02 03:07
sjensen: 圖片置中也可以用flex操作。 08/02 03:07
Rplus: 定好容器寬,img 用 object-fit 處理 08/02 16:37