課程
/前端開發(fā)
/Vue.js
/快速入門Web閱讀器開發(fā)
就是這么巨大,嘗試了穿透修改圖片大小,但是不好使
2018-09-25
源自:快速入門Web閱讀器開發(fā) 3-2
正在回答
你好,這是一個(gè)非常好的問題,要實(shí)現(xiàn)這一點(diǎn)需要使用epubjs的高級特性:css注入,因?yàn)閑pubjs的實(shí)現(xiàn)原理是iframe,而iframe中的dom不受我們的css控制,所以必須要注入css才能實(shí)現(xiàn),具體做法如下:
1、在static目錄下創(chuàng)建一個(gè)test.css,填入以下內(nèi)容:
.CoverFigure?{ ??width:?100%!important; ??height:?100%!important; } .CoverFigure?img?{ ??width:?100%!important; ??max-height:?100%!important; }
2、在Ebook.vue的showEpub()末尾添加以下代碼:
this.rendition.hooks.render.register(view?=>?{ ??const?contents?=?this.rendition.manager.getContents()[0] ??contents.addStylesheet('/static/test.css') })
在test.css中你可以對img的大小進(jìn)行控制
OSZZ
舉報(bào)
帶你了解電子書閱讀器的工作原理,通過Vue.js快速實(shí)現(xiàn)Web閱讀器
3 回答電子書渲染不出來
1 回答電子書沒渲染出來,問題出在哪兒
1 回答渲染電子書不成功
1 回答渲染不出電子書 container沒有內(nèi)容
2 回答圖書渲染不出
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網(wǎng)安備11010802030151號
購課補(bǔ)貼聯(lián)系客服咨詢優(yōu)惠詳情
慕課網(wǎng)APP您的移動(dòng)學(xué)習(xí)伙伴
掃描二維碼關(guān)注慕課網(wǎng)微信公眾號
2018-09-25
你好,這是一個(gè)非常好的問題,要實(shí)現(xiàn)這一點(diǎn)需要使用epubjs的高級特性:css注入,因?yàn)閑pubjs的實(shí)現(xiàn)原理是iframe,而iframe中的dom不受我們的css控制,所以必須要注入css才能實(shí)現(xiàn),具體做法如下:
1、在static目錄下創(chuàng)建一個(gè)test.css,填入以下內(nèi)容:
2、在Ebook.vue的showEpub()末尾添加以下代碼:
在test.css中你可以對img的大小進(jìn)行控制