[问题] 设定padding之后图片无法满版?

楼主: cgcat (小绵羊赶集)   2020-01-31 11:41:37
各位高手~新年快乐
我在练习这个范例的时候遇到这样的问题
https://codepen.io/willlai/pen/XWJLaWN
问题:如果我希望在右边的文字上增加上下左右的间距
于是这样设定
.item-group .txt {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 40px;
box-sizing: border-box;
}
左边的图片在桌机上就无法满版
(左图得满版效果希望是跟灰色的底块一样高度,但现在会被PADDING跟文字过多后
撑开底下的高度
)
请问遇到这样的问题我该如何解决呢?
感谢
作者: nick8195 (煎饼)   2020-01-31 11:50:00
可以更详细地描述你希望的左图"满版"是什么样子吗?最直接的做法是图片加上height:100% 但会变形你也可以试试object-fit这个属性, 但要注意在ie上的相容
楼主: cgcat (小绵羊赶集)   2020-01-31 12:24:00
谢谢你~学到了~第一次看到object-fit这个属性,可惜IE不支援
作者: pandaz79418 (批炸)   2020-02-01 02:48:00
同楼上说的是图片高度的问题,我建议是一开始图片尺寸就要先确认再来用RWD才不会跑版。通常设计画面时候图就会确认尺寸,切版时也不会碰上这种个问题。但如果以你这个例子,我会有两种写法一种是写在html两个尺寸的img藏起来一个在断点时候互换,一种是写在css用背景图换。
作者: OKChika (迹卡)   2020-02-04 16:09:00
我的话,我会把这张图设为 <div class="item pic"> 的背景图(里面就不放img),设定background-size: cover。在较小的宽度尺寸(变成图文直式)断点,设定div的高度,免得背景图没有文字在旁边就显示不出来。但是要注意图片里你想表达的东西是否会被裁切到
楼主: cgcat (小绵羊赶集)   2020-02-04 16:43:00
谢谢以上高手的教学

Links booklink

Contact Us: admin [ a t ] ucptt.com