|
|
发表于 2017-5-26 15:27:47
|
显示全部楼层
8 h; O+ Q& V# u/ |: D
不知是否是这样的效果(见图):' W# Q. @" \" N6 v
竖图
: |/ D- y5 q& v: c0 P+ I. A
1 Q4 h3 m! I& @0 O: D* }2 t; I! y8 e1 V. X1 r% N$ C
5 ?+ T/ T: H( T5 W! l, C横图
' l* i/ }# S) N: W( s/ E' k8 x; U" _& p& Z5 f# |5 Z
9 U, n/ O& V1 w- }$ P& C: G5 o/ S; @9 ?
用css来显示区域的大小.
0 l+ P& \5 v( n2 Y首先要知道图片的大小. 在同一套卡片的所有图片的大小最好大致相当. 取个适当的大小值.7 p7 V& D5 A2 T `
比如竖图像素为: 552 x 12501 o* U) u g- K7 ]2 i. n
用css显示比图像大小要大的区域. 假设为 600 x 1280
! y, A" `$ w2 N! Z- X; J7 F' S6 }1 }(取小了, 图片会自动缩小.)9 T9 g; i* f4 m2 A
! K0 ^5 x2 m. q8 j0 H8 K! i1, 在Styling区内后面加上css:
) q$ e* ^7 ]4 l/ x% c* C' F3 U0 M/ A8 q
.img{width:600px;height:1280px;}
( N2 C5 q1 ~2 b F3 ]% I4 i4 `' L6 y, ]! N% B
2, 在Back Template区的字段加上标签.
" A6 E& ?6 ]/ G- b比如原来的字段为:7 r: ^5 G+ C K( j* ?$ e
{{Back}}4 o8 t" b1 ~- ?4 z( t% K
; v Y# k1 }) V5 U
加上之后为:; E/ l, ~: N$ s4 ?. E! n, Q z
<div class="img">{{Back}}</div>
- X# Y9 D) L3 R. p. L8 _, {. q) Q& U9 i0 c2 y& s, m& J( H; i( s6 t
效果就是Anki的答案区的图片显示区域为: 600 x 1280像素了.
4 S7 v5 |3 R' b
6 l" ^! Q' {+ {; M
6 u4 e, G* s2 e7 K' T如果横图为: 1250 x 552
1 }1 N2 S+ U4 }, t3 R, t则为:
; {9 S1 h* i" }) k.img{width:1280px;height:600px;}; |4 C" Z- `# V) [+ Z
l8 b* z3 A# S7 z- }. ~: F) w6 X) u% Z
如果设置为:
) x% ~" K6 |+ o- V.img{width:1280px;height:1280px;}
% K5 B7 n8 a; p( ~8 J8 y7 b那么显示区域会很大, 在下就不知道如何设置图片居中了.2 c# ]1 R+ c% c( d0 f# l
( |7 ]" o& w; M/ V& k% Z适逢有用, 偶然所得. 希望没有理解错误.
9 k) j1 ~5 Q2 o8 M( B: l: Q5 K$ | |
本帖子中包含更多资源
您需要 登录 才可以下载或查看，没有账号？免费注册
x
|
楼主
