楼主:
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不支援
同楼上说的是图片高度的问题，我建议是一开始图片尺寸就要先确认再来用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谢谢以上高手的教学