作者mate99 (kkk)
看板Web_Design
標題[問題] 圖片隨文字高度等比縮放
時間Sat Jul 31 17:02:08 2021
如標題所述
在同一列上面左邊欄位的文字行數會隨後端傳遞的資料多寡，高度會改變，
文字欄位跟圖片欄位寬度比例是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://webptt.com/m.aspx?n=bbs/Web_Design/M.1627722130.A.F7E.html
1F：推 sjensen: 只變高度嗎？這樣圖片怎麼會比例轉變？ 08/02 03:07
2F：→ sjensen: 不知道把width設定好60%40%可不可行，要看文字區塊內容打 08/02 03:07
3F：→ sjensen: 算怎麼處理，目前想到word-wrap或是flex應該都好處理。 08/02 03:07
4F：→ sjensen: 圖片置中也可以用flex操作。 08/02 03:07
5F：→ Rplus: 定好容器寬，img 用 object-fit 處理 08/02 16:37