Image resizing issues while using max-height/max-width

Detroa · 08-07-2020, 11:32 AM

Hello,

First of all, sorry if I'm not using the correct terms or if my explanation is a little fuzzy, I'm very new to this and English isn't my first language.

I'm working on a ePub containing a lot of images which is a first for me. Some images are extra wide, some are extra long.
My goal is to use the same set of parameters on all images, no matter their dimensions or orientations, that would display each of them at the biggest possible scale without exceeding any ereader screen size and while keeping the correct aspect ratio.

My current code is the following:

Code:

<div style="width: 100%; max-height: 100%;">
    <img style="max-height: 100%; max-width: 100%; display: block;" src="image.jpg" />
</div>

I was thinking that:
1. The container div would take 100% of the page width (that part seems to work);
2. The image, using "display: block" would try to take up 100% of its container width but would stop scaling it as soon as the height would reach 100% (that part doesn't seem to work).

If I only have one image on the screen, it scales correctly but as soon as I have other elements displayed, it looks like they're squeezing the image and its container div.

Example: in the following picture, I'd like for the images to be scaled according to the available width of the page/div and push the other elements (tables, texts) down instead of being squeezed by them (I put a 1px border on one of the image container div to confirm it was taking up 100% of the page width).
https://i.stack.imgur.com/66cb6.jpg

Does anyone know how this could be fixed?

Thank you a lot for reading.

phillipgessert · 08-07-2020, 01:06 PM

Someone more knowledgeable will likely reply, but I think your problem is twofold. First, each of those only take into account the height of the container, which for that parent div is (I assume) <body>; and second, AFAIK there is no reliable way to target the height of the viewport for ebook. I believe the only way to accomplish what you hope to do is via SVG wrapper, and even then I think you'd have to force page breaks around them.

hobnail · 08-07-2020, 01:43 PM

Also look at https://friendsofepub.github.io/eBookTricks/ where he recommends

Code:

img {
  object-fit: contain;
}

hobnail · 08-07-2020, 02:39 PM

For the sake of completeness I should say what I use, which is stuff I've gleaned from various sources:

Code:

img {
    max-width: 100%;
    object-fit: contain;
    width: auto;
}

But I rarely have images in books I've converted since they're almost all fiction.

Maybe also look in the ebook collection here at books uploaded by grannygrump; she focuses on illustrated books.

Detroa · 08-08-2020, 08:19 AM

Thank you so much to both of you for this explanation and that link.

Keeping in mind what phillipgessert said I fiddled with some of the code found in hobnail's link and the following paramaters seem to work!

Code:

<div>
	<img src="image.jpg" />
</div>

.div
{
	width: 100%;
	max-height: 100%;
	page-break-inside: avoid;
	break-inside: avoid;
}
.img
{
	max-width: 100%;
	max-height: 100%;
}

JSWolf · 08-13-2020, 07:22 PM

Quote:

Originally Posted by hobnail

For the sake of completeness I should say what I use, which is stuff I've gleaned from various sources:

Code:

img {
    max-width: 100%;
    object-fit: contain;
    width: auto;
}

But I rarely have images in books I've converted since they're almost all fiction.

Maybe also look in the ebook collection here at books uploaded by grannygrump; she focuses on illustrated books.

That doesn't work with ADE. So it's no good.

Turtle91 · 08-14-2020, 06:53 AM

Quote:

Originally Posted by JSWolf

That doesn't work with ADE. So it's no good.

...for ADE. If you are going to use a device which use ADE then you might be concerned. Check which software/renderer are used by the devices of your target market.

JSWolf · 08-14-2020, 03:34 PM

Quote:

Originally Posted by Turtle91

...for ADE. If you are going to use a device which use ADE then you might be concerned. Check which software/renderer are used by the devices of your target market.

Most Readers that handle ePub use ADE. And ADE is on computers that use Overdrive or download DRMed ePub. ADE is the most used software for reading ePub. Sure that code may work on other programs, but when it fails on the largest market, it's a fail to use it.

JSWolf · 08-14-2020, 03:41 PM

Quote:

Originally Posted by Detroa

Thank you so much to both of you for this explanation and that link.

Keeping in mind what phillipgessert said I fiddled with some of the code found in hobnail's link and the following paramaters seem to work!

Code:

<div>
	<img src="image.jpg" />
</div>

.div
{
	width: 100%;
	max-height: 100%;
	page-break-inside: avoid;
	break-inside: avoid;
}
.img
{
	max-width: 100%;
	max-height: 100%;
}

Your code is not the best way to do it. The issue is with the div.

Code:

div {
  height: 100%;
  max-width: 100%;
  max-height: 100%;
}

You do not need any sort of page break. Also, max-height does not always work. But where it doesn't work, it doesn't seem to cause any problems. max-width does work in more cases. That's why the code I posted works in more cases.

Turtle91 · 08-14-2020, 04:31 PM

Quote:

Originally Posted by JSWolf

Most Readers that handle ePub use ADE. And ADE is on computers that use Overdrive or download DRMed ePub. ADE is the most used software for reading ePub. Sure that code may work on other programs, but when it fails on the largest market, it's a fail to use it.

Quote:

Sony Reader, Kobo eReaders and Nook Ebook Readers use Adobe Digital Editions to transfer ebooks in PDF or ePub format protected with Adobe DRM from the computer to the device. Amazon Kindle does not use Adobe Digital Editions.

Seems like if they want to sell on Kindle then they don't have to worry about if ADE works....

Correct me if I'm wrong, but there is a not-insignificant number of sales on the Kindle platform??

JSWolf · 08-14-2020, 04:42 PM

Quote:

Originally Posted by Turtle91

Seems like if they want to sell on Kindle then they don't have to worry about if ADE works....

Correct me if I'm wrong, but there is a not-insignificant number of sales on the Kindle platform??

You can sell Kindle eBooks and ePub eBooks.

DaleDe · 08-14-2020, 07:16 PM

Quote:

Originally Posted by Turtle91

Seems like if they want to sell on Kindle then they don't have to worry about if ADE works....

Correct me if I'm wrong, but there is a not-insignificant number of sales on the Kindle platform??

Kindle does not sell ePub formatted eBooks. They have their own format which is based on MOBI format. A form of ePub can serve as an input to Amazon but they will then convert it. Kindle's format is not compatible with the ePub format so selling ePub does not apply to Kindle.

Dale

Turtle91 · 08-14-2020, 09:16 PM

OK....but does that mean that Kindle CARES about ADE in any way, shape, or form?

DaleDe · 08-15-2020, 12:46 PM

Quote:

Originally Posted by Turtle91

OK....but does that mean that Kindle CARES about ADE in any way, shape, or form?

Not really. They overlap a bit with US libraries loans. Overdrive supports both Amazon and ADE DRM. Outside the US only ADE DRM is supported. From an eBook reader viewpoint they are incompatible due in part to DRM and in part due to the basic eBook formats being totally different.

Dale

JSWolf · 08-15-2020, 01:03 PM

Quote:

Originally Posted by DaleDe

Kindle does not sell ePub formatted eBooks. They have their own format which is based on MOBI format. A form of ePub can serve as an input to Amazon but they will then convert it. Kindle's format is not compatible with the ePub format so selling ePub does not apply to Kindle.

Dale

Sorry, but that's not correct. KF8 is based on ePub.

08-07-2020, 11:32 AM	#1
Detroa Junior Member Posts: 5 Karma: 10 Join Date: Aug 2020 Device: Kobo	Image resizing issues while using max-height/max-width Hello, First of all, sorry if I'm not using the correct terms or if my explanation is a little fuzzy, I'm very new to this and English isn't my first language. I'm working on a ePub containing a lot of images which is a first for me. Some images are extra wide, some are extra long. My goal is to use the same set of parameters on all images, no matter their dimensions or orientations, that would display each of them at the biggest possible scale without exceeding any ereader screen size and while keeping the correct aspect ratio. My current code is the following: Code: <div style="width: 100%; max-height: 100%;"> <img style="max-height: 100%; max-width: 100%; display: block;" src="image.jpg" /> </div> I was thinking that: 1. The container div would take 100% of the page width (that part seems to work); 2. The image, using "display: block" would try to take up 100% of its container width but would stop scaling it as soon as the height would reach 100% (that part doesn't seem to work). If I only have one image on the screen, it scales correctly but as soon as I have other elements displayed, it looks like they're squeezing the image and its container div. Example: in the following picture, I'd like for the images to be scaled according to the available width of the page/div and push the other elements (tables, texts) down instead of being squeezed by them (I put a 1px border on one of the image container div to confirm it was taking up 100% of the page width). https://i.stack.imgur.com/66cb6.jpg Does anyone know how this could be fixed? Thank you a lot for reading. Last edited by Detroa; 08-07-2020 at 11:35 AM.

08-07-2020, 01:43 PM	#3
hobnail Running with scissors Posts: 1,552 Karma: 14325282 Join Date: Nov 2019 Device: none	Also look at https://friendsofepub.github.io/eBookTricks/ where he recommends Code: img { object-fit: contain; }

08-07-2020, 02:39 PM	#4
hobnail Running with scissors Posts: 1,552 Karma: 14325282 Join Date: Nov 2019 Device: none	For the sake of completeness I should say what I use, which is stuff I've gleaned from various sources: Code: img { max-width: 100%; object-fit: contain; width: auto; } But I rarely have images in books I've converted since they're almost all fiction. Maybe also look in the ebook collection here at books uploaded by grannygrump; she focuses on illustrated books.

08-08-2020, 08:19 AM	#5
Detroa Junior Member Posts: 5 Karma: 10 Join Date: Aug 2020 Device: Kobo	Thank you so much to both of you for this explanation and that link. Keeping in mind what phillipgessert said I fiddled with some of the code found in hobnail's link and the following paramaters seem to work! Code: <div> <img src="image.jpg" /> </div> .div { width: 100%; max-height: 100%; page-break-inside: avoid; break-inside: avoid; } .img { max-width: 100%; max-height: 100%; }

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Resizing images, retaining width-height rato, and only if necessary.	Vanguard3000	Sigil	7	07-31-2015 10:43 AM
Max Height in Calibre Viewer	XrXca	Calibre	3	03-14-2014 10:46 PM
KF8 max-width HTML CSS tag broken?	ekovv	Kindle Formats	5	09-05-2012 04:57 AM
Max-Height	theducks	Sigil	6	09-02-2010 05:40 PM
kindle 3 max. 3gb oder max. 3500 bücher	kakakanno	Amazon Kindle	8	08-22-2010 03:27 AM

08-07-2020, 01:06 PM	#2
phillipgessert Addict Posts: 311 Karma: 3196258 Join Date: Oct 2015 Location: Madison, WI Device: Kindle 5th Gen	Someone more knowledgeable will likely reply, but I think your problem is twofold. First, each of those only take into account the height of the container, which for that parent div is (I assume) <body>; and second, AFAIK there is no reliable way to target the height of the viewport for ebook. I believe the only way to accomplish what you hope to do is via SVG wrapper, and even then I think you'd have to force page breaks around them.

08-14-2020, 09:16 PM	#13
Turtle91 A Hairy Wizard Posts: 3,095 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	OK....but does that mean that Kindle CARES about ADE in any way, shape, or form?