MobileRead Forums - View Single Post - Want to Center Irregular Images with text wrap

dgatwood · 04-01-2013, 02:23 AM

The max-width: 100% CSS property is probably what you want, causing the image to scale to the entire width of the image. The problem is that this will require completely redoing the way you are creating the inset for the text so that it will scale equally.

If you use a negative bottom margin, it will raise all the text up. If you then create a transparent spacer image that is the same width as the part that sticks down, float it right, and set its max-width (in percent) to the width of the part that sticks down times 100 divided by the total, you should then be able to block out that second region.

Then, between the actual image and the spacer, add a single-pixel-high spacer with max-width: 100% to ensure that none of the text ends up being beside the image even if the screen height would cause the image to not expand to full width. However, there's still the problem of the reader potentially adding a page break that could cause the bottom part of the image to go away entirely.

---

Maybe the idea of breaking it up into two pieces is a better idea. Float the bottom tail to the right. Set all the left and right margins to zero. Set the max-width to 100% for the big part, and the appropriate percentage for the small part. Note that you may need to pad the image to ensure that the percentage can be precisely expressed.

Then, the worst-case scenario is that the reader wraps the tail to the next page.

Thoughts?

04-01-2013, 02:23 AM	#14
dgatwood Curmudgeon Posts: 629 Karma: 1623086 Join Date: Jan 2012 Device: iPad, iPhone, Nook Simple Touch	The max-width: 100% CSS property is probably what you want, causing the image to scale to the entire width of the image. The problem is that this will require completely redoing the way you are creating the inset for the text so that it will scale equally. If you use a negative bottom margin, it will raise all the text up. If you then create a transparent spacer image that is the same width as the part that sticks down, float it right, and set its max-width (in percent) to the width of the part that sticks down times 100 divided by the total, you should then be able to block out that second region. Then, between the actual image and the spacer, add a single-pixel-high spacer with max-width: 100% to ensure that none of the text ends up being beside the image even if the screen height would cause the image to not expand to full width. However, there's still the problem of the reader potentially adding a page break that could cause the bottom part of the image to go away entirely. --- Maybe the idea of breaking it up into two pieces is a better idea. Float the bottom tail to the right. Set all the left and right margins to zero. Set the max-width to 100% for the big part, and the appropriate percentage for the small part. Note that you may need to pad the image to ensure that the percentage can be precisely expressed. Then, the worst-case scenario is that the reader wraps the tail to the next page. Thoughts?