Set up images export to fit both horizontal and vertical screen in ePub in InDesign

[Bing Ng.]

Hi! I'm a newbie in creating epubs. I've completed some basic steps for my epub and tested it on Kindle Previewer. It looks great in portrait mode, but when switched to landscape mode it's really a disaster. The pictures have been cropped vertically. I know this error is because I set the size incorrectly in Object Export Options. I don't know how to set up this part so that my pictures can automatically adjust to fit the screen frame in both landscape and portrait modes (70% of the frame for example) like the picture I attached.

If I have to implement this with CSS, please guide me, I can understand a bit about this part.

Thank you very much.

[BobLevine]

Have you tried this in other EPUB readers?

[Bing Ng.]

I have tried it on my devices like ibook on laptop, iphone and basic kindle. Even when I set the size to default or custom height: 80vmin it shows the entire picture. Meanwhile, when I test with Kindle Previewer, it is in the same situation as the picture below. I am confused, I do not know when I publish it with kindle whether it will encounter the same problem or not?

Can I ask you, what do you think is the best practice or the setting you often use for images when exporting epub file from InDesign?

Thank you very much.

[Echris]

Couple items and a question or two. First for kindle, only ever use previewer to test the ebook, past couple years amazon has moved away from saying to test on devices or apps besides previewer, their recommendation, so I'd do that first. Second, so the first image you posted, vertical and horizontal in your original post, when you flip it horizontally that's what you will see, the image will have the white space on the left and right, because it can't fill it entirely unless it's a more horizonal image. For amazon also remember, nothing too fancy for them, to them a dropcap high styling, so just a word of warning. Your image looks like it is also seetup to be centered and space above and below so that's where the text will go. This could have been done in indesign or if you altered any css afterwards. But let me know if you are looking to accomplish something else in case I misunderstood what you want to do. 

[Bing Ng.]

Thank you for your answer. The two pictures of the bonsai tree that I sent are my target format, that is, the picture can automatically adjust to fit both horizontal and vertical layouts, which shows the entire image with a few lines of text. Right now, I have been able to set it up to automatically adjust to fit the screen frame like the picture I sent below (I anchored it on a separate paragraph and set the Image size to default). But if I want it to come with a few more lines of text (like the picture with the bonsai tree), how do I need to adjust the Object Export Options or CSS. I would greatly appreciate if you could show me this.

[James Gifford—NitroPress]

Here's the long form answer: http://www.nitrosyncretic.com/DPR/dpr_indesign_epub_image_mgmt.php .

The shorter answer is to click to select any image in your layout, then right-click and click Object Export Options:

There's lots to unpack in this menu, most of which is covered in the essay above. But your fundamental choice is at the bottom. Start with None, then try Relative to Text Flow. The other settings help refine the positioning and end quality.

You can usually avoid any further CSS styling if you make proper use of this menu. Not always, but your need is a pretty simple one.

[Bing Ng.]

Hi! Thank you so much for your suggestion. I managed to do it by anchoring the image to a separate paragraph and setting it to default mode.

I have another arising question, that is, even though I've placed the image at the same size and set up export via object style, it still happens on devices that the image files do not appear evenly as in the two pictures below. I don't know why this issue arises, or if this is Kindle's default viewing mode. When I read with Apple's Book app, this doesn't happen. When I convert it to a mobi version for the old Kindle, I also don't encounter any issues. But when reading with the Kindle app on the phone, this happens. If I want them to be really uniform, is there any optimal solution?

[James Gifford—NitroPress]

If you didn't set the image size mode to None, you will not get truly flexible display.. Everything else is up to the specific image proportions (which margins it touches first) and the specific reader used.

[James Gifford—NitroPress]

Kindle does not support vh, vmin or vmax and supports vw only sketchily. (Basically, no reflowable reader has any page height at all except the virtual assignment of what's on the screen; most EPUB readers will assign a value to it, but Kindle is rigid and does not.)

The solution to get full-width images is to use 100% custom width, or the None setting (which omits all image sizing information, leading most readers to make the image somewhat more than margin width.)