作者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/cn.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