|
|
发表于 2017-5-26 15:27:47
|
显示全部楼层
) X/ g0 x, m' L- b- n Y, i2 Q5 ?
不知是否是这样的效果(见图):
- d8 \9 z5 h9 ~# l/ w+ o2 g竖图
" r. s. ?9 X" Y, ~+ L* Z3 y7 T* B; L9 Y' A4 a# l, d! K
+ a/ C/ d3 S9 O* c( F. e1 t
; E8 L. g4 P$ g5 N横图, K. H" \' U R5 S- j* X" @1 H+ `
5 [# ^8 H, D1 N. J" {
+ O" V- L1 D" f; _
# v$ w0 `% y; ^/ F6 D9 P用css来显示区域的大小.3 _2 i% H% J4 D
首先要知道图片的大小. 在同一套卡片的所有图片的大小最好大致相当. 取个适当的大小值.3 f) g4 W1 ?* f
比如竖图像素为: 552 x 1250
2 M. Q1 f9 ]) B4 L8 ^, C/ B5 i! x1 `$ E用css显示比图像大小要大的区域. 假设为 600 x 1280( n' b' D" n/ Z9 R
(取小了, 图片会自动缩小.)5 ~; x, o/ E3 |3 v2 ^7 s' m
7 P% b) f6 F+ _- ~9 Z) r
1, 在Styling区内后面加上css:
}% K( ^# ?2 b7 k* [
8 I1 ^9 w4 x# n.img{width:600px;height:1280px;}9 R! T0 I5 V6 t6 s6 ]
2 w$ g/ t, [: U4 Z9 y0 U
2, 在Back Template区的字段加上标签.
" c) @# Y2 P9 x A& w9 S5 p, g比如原来的字段为:+ S% m0 `/ h+ K+ o/ I, ?) Q
{{Back}}6 G- `1 g& N" X) b# D N
# M/ {* J! `; \% \* l加上之后为:
) N* Z/ S& t7 q" m [& @<div class="img">{{Back}}</div>
/ y: B1 C( [, p. w5 R' u7 ~/ s
7 r4 R0 G0 L+ M: |/ w" a5 C效果就是Anki的答案区的图片显示区域为: 600 x 1280像素了.
0 e5 K/ S0 M R0 Q7 K, M$ j9 e2 f9 n/ t. @8 A, |9 |5 N5 J* t
: g+ D4 x6 s; j- I2 B
如果横图为: 1250 x 552
0 P& y; q6 B P" x- X则为:
+ L/ n. n, Z6 I; ?.img{width:1280px;height:600px;}! f6 {2 E) a( ?1 l2 I5 s/ I0 Q
. p; j. {- @9 Q( n; B
1 W/ H- h' _- u8 ^& P如果设置为:
$ h. a* u3 }$ b& i* a/ U.img{width:1280px;height:1280px;}( X4 [. h9 [2 N# C1 }
那么显示区域会很大, 在下就不知道如何设置图片居中了.
! F8 Y9 m. {, P6 [6 d0 O; o: h6 ^3 l3 S+ Y; W- s
适逢有用, 偶然所得. 希望没有理解错误.
9 e% ~2 j, z M2 S& S |
本帖子中包含更多资源
您需要 登录 才可以下载或查看，没有账号？免费注册
x
|
楼主
