search

dvschultz / 99problems

99 Problems and e-reader rendering are all of them
60 stars 3 forks source link

iBooks ignores <img> height and width attributes #9

Open NickBarreto opened 10 years ago

NickBarreto commented 10 years ago

iBooks completely ignores attributes in an element, instead showing the image a it's full pixel size, or as large as it can be given the width of the current view.

dvschultz commented 10 years ago

oh yeah this is a classic issue. I think the workaround is still wrapping it in an element (like <figure>) and setting the width on that, right?

NickBarreto commented 10 years ago

If I remember correctly, yes. Thought it's been a while since I last checked. It may require an additional max-width:100% on the img element so it doesn't just overflow outside the container figure

dvschultz commented 10 years ago

yeah, that’s what I have in my base stylesheet as well.

teytag commented 10 years ago

Reflowable design for iBookstore upload: 

<img alt="DEST6100.jpg" class="cover" src="images/DEST6100.jpg" />

If you don't upload it: 

<img width="auto" height="auto" alt="eposta1.PNG" src="../teytag/lup/resim/eposta1.PNG" />
artbyrt commented 8 years ago

I'm not having any luck with these workarounds. Images ignore img max-width: 100% and width: 100% . Grrr!!

artbyrt commented 8 years ago

solved it!! You need not only max-width: 100% on figure element but also a margin: 0; on the element. I keep finding that there does not seem to be the same inheritance structure in CSS for epub and I have to reiterate. While I zeroed out the margins on the body element this had to be done again on the image ... that doesn't seem right at all.