fit a image to the width of screen

leescott · 07-21-2015, 07:20 AM

How to fit a image to the width of screen(mobile)?Can you give me some codes about such things.
And for diffrent screen ,image width has the least request?
Thanks for your work!
Please give me codes.
My document is epub.

leescott · 07-21-2015, 07:48 AM

http://www.cnepub.com/discuz/thread-204859-2-1.html
I can't use it。Why?

Turtle91 · 07-21-2015, 08:14 AM

Welcome to MR Forum!

You might want to try asking these types of questions in the Workshop area. This sub-forum is for Calibre specific questions.

For most book format's you could use the following:

Code:

<div class="whatever"><img alt="" src="../Images/example.jpg" /></div>

with CSS:
.whatever {width:100%; max-width:2015px} 
               *set max-width to the actual width of that image*
               *add any other styling to your preferences*

This will keep the aspect ratio and expand it to fill the <div> but will not stretch the image if the screen is too large - that prevents blurring of the image.

You could also try wrapping the image in SVG - but that is a bit more complicated and I've been told that not all devices support SVG all the time.

I hope that helps!

leescott · 07-21-2015, 08:29 AM

Thanks for your reply!
Here's a file.http://pan.baidu.com/s/1i3F4TSx
I asked such question at here ,because I made epub using cablibre from a word file.

theducks · 07-21-2015, 08:53 AM

Moderator Notice
This is a generic EPUB question. It does not change because of the tool you used (Calibre) to make it. Moved

Notjohn · 07-23-2015, 05:44 AM

I use images 800 pixels wide, with the html instruction width="100%" , and have not experienced any problems that I know of.

I put that instruction inline, so that I'm not stuck with it in every case.

leescott · 07-23-2015, 06:35 AM

Thanks!
I have try 800 pixels on my 7 inches mobile,next I will revise my epub.
Maybe some things is more sophisticated, as there're different reader softwares.

Turtle91 · 07-23-2015, 10:39 AM

Quote:

Originally Posted by Notjohn

I put that instruction inline, so that I'm not stuck with it in every case.

I hadn't thought of that - I try and keep all styling in the CSS. I usually don't work with a large number of images, so having 4-5 lines in the CSS with different max-width has been fine, but if you have a lot of images that may make it easier.

e.g.
<div class="image"><img alt="" style="max-width:9999px" src="../Images/example.jpg" /></div>

and a single CSS line:
div.image {width:100%} /* plus any other styling */

07-21-2015, 07:20 AM	#1
leescott Junior Member Posts: 4 Karma: 10 Join Date: Jul 2015 Device: BOOX	fit a image to the width of screen How to fit a image to the width of screen(mobile)?Can you give me some codes about such things. And for diffrent screen ,image width has the least request? Thanks for your work! Please give me codes. My document is epub.

07-21-2015, 08:14 AM	#3
Turtle91 A Hairy Wizard Posts: 3,094 Karma: 18727053 Join Date: Dec 2012 Location: Charleston, SC today Device: iPhone 11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire	Welcome to MR Forum! You might want to try asking these types of questions in the Workshop area. This sub-forum is for Calibre specific questions. For most book format's you could use the following: Code: <div class="whatever"><img alt="" src="../Images/example.jpg" /></div> with CSS: .whatever {width:100%; max-width:2015px} set max-width to the actual width of that image add any other styling to your preferences This will keep the aspect ratio and expand it to fill the <div> but will not stretch the image if the screen is too large - that prevents blurring of the image. You could also try wrapping the image in SVG - but that is a bit more complicated and I've been told that not all devices support SVG all the time. I hope that helps! Last edited by Turtle91; 07-21-2015 at 08:17 AM.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Changing image width in the economist	goios	Recipes	1	04-24-2014 01:29 PM
problem with floating image and relative width	jobalcaen	ePub	5	08-17-2013 07:53 AM
K3 - Fit to screen (width) for PDF	nuke	Amazon Kindle	0	09-30-2010 09:27 AM
How to center/fit page width SVG images with <OBJECT>	amoroso	ePub	0	07-31-2010 11:48 AM
PRS-600 How to make prs600 display PDF fit width?	wifish	Sony Reader	1	12-20-2009 12:28 PM

07-21-2015, 07:48 AM	#2
leescott Junior Member Posts: 4 Karma: 10 Join Date: Jul 2015 Device: BOOX	http://www.cnepub.com/discuz/thread-204859-2-1.html I can't use it。Why?

07-21-2015, 08:29 AM	#4
leescott Junior Member Posts: 4 Karma: 10 Join Date: Jul 2015 Device: BOOX	Thanks for your reply! Here's a file.http://pan.baidu.com/s/1i3F4TSx I asked such question at here ,because I made epub using cablibre from a word file.

07-21-2015, 08:53 AM	#5
theducks Well trained by Cats Posts: 29,800 Karma: 54830978 Join Date: Aug 2009 Location: The Central Coast of California Device: Kobo Libra2,Kobo Aura2v1, K4NT(Fixed: New Bat.), Galaxy Tab A	Moderator Notice This is a generic EPUB question. It does not change because of the tool you used (Calibre) to make it. Moved

07-23-2015, 05:44 AM	#6
Notjohn mostly an observer Posts: 1,515 Karma: 987654 Join Date: Dec 2012 Device: Kindle	I use images 800 pixels wide, with the html instruction width="100%" , and have not experienced any problems that I know of. I put that instruction inline, so that I'm not stuck with it in every case.

07-23-2015, 06:35 AM	#7
leescott Junior Member Posts: 4 Karma: 10 Join Date: Jul 2015 Device: BOOX	Thanks! I have try 800 pixels on my 7 inches mobile,next I will revise my epub. Maybe some things is more sophisticated, as there're different reader softwares.

Advert

Advert