作者cgcat (小绵羊赶集)
看板Web_Design
标题[问题] 设定padding之後图片无法满版?
时间Fri Jan 31 11:41:37 2020
各位高手~新年快乐
我在练习这个范例的时候遇到这样的问题
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跟文字过多後
撑开底下的高度
)
请问遇到这样的问题我该如何解决呢?
感谢
--
※ 发信站: 批踢踢实业坊(ptt.cc), 来自: 210.242.160.66 (台湾)
※ 文章网址: https://webptt.com/cn.aspx?n=bbs/Web_Design/M.1580442100.A.3BF.html
1F：推 nick8195: 可以更详细地描述你希望的左图"满版"是什麽样子吗? 01/31 11:50
※ 编辑: cgcat (210.242.160.66 台湾), 01/31/2020 11:55:38
2F：推 nick8195: 最直接的做法是图片加上height:100% 但会变形 01/31 11:57
3F：→ nick8195: 你也可以试试object-fit这个属性, 但要注意在ie上的相容 01/31 11:58
4F：→ cgcat: 谢谢你~学到了~第一次看到object-fit这个属性,可惜IE不支援 01/31 12:24
5F：推 pandaz79418: 同楼上说的是图片高度的问题，我建议是一开始图片尺 02/01 02:48
6F：→ pandaz79418: 寸就要先确认再来用RWD才不会跑版。通常设计画面时 02/01 02:48
7F：→ pandaz79418: 候图就会确认尺寸，切版时也不会碰上这种个问题。但 02/01 02:48
8F：→ pandaz79418: 如果以你这个例子，我会有两种写法一种是写在html两 02/01 02:48
9F：→ pandaz79418: 个尺寸的img藏起来一个在断点时候互换，一种是写在cs 02/01 02:48
10F：→ pandaz79418: s用背景图换。 02/01 02:48
11F：推 OKChika: 我的话，我会把这张图设为 <div class="item pic"> 的 02/04 16:09
12F：→ OKChika: 背景图(里面就不放img)，设定background-size: cover。 02/04 16:10
13F：→ OKChika: 在较小的宽度尺寸(变成图文直式)断点，设定div的高度， 02/04 16:10
14F：→ OKChika: 免得背景图没有文字在旁边就显示不出来。 02/04 16:10
15F：→ OKChika: 但是要注意图片里你想表达的东西是否会被裁切到 02/04 16:14
16F：→ cgcat: 谢谢以上高手的教学 02/04 16:43