Image in table cell won't resize in IE

[kunzi]

There seems to be a problem with images inside table cells.

We have:
– full width page
– full width table with four columns
– images inside each column

The images are not scaled to fit the table cells in IE. Images are too big and expand to the right outside the page.

[kunzi]

This reply has been marked as private.

[kunzi]

And I found a solution. Add the following style to the table:

table-layout: fixed;

[kunzi]

The previously mentioned solution works on desktop IE, but in Windows mobile the problem still exists. The images do not scale correctly and only the first column of images are shown while the rest are left outside the screen.

[Melanie – SUPPORT]

Hey, I don’t have a windows phone to test with, so I will forward this to the developer. Cheers

[Swift Ideas – Ed]

Hi @kunzi

I wouldn’t recommend using the table shortcode for this, but instead why don’t you use the image asset in the page builder? That way you can set 4 images across per row, and they will be responsive, going to full width on mobile.

Hope that helps.

– Ed

[kunzi]

I would gladly use them if our customer would have the ability to edit all the images to be the same size so it would look nice when they add more images 🙂

I tried your recommendation earlier and could not get the images to align vertically and result was not so pretty as the image heights would vary from image to image. The table version aligns them nicely.

[Swift Ideas – Ed]

What if we set a max-height for the image and then set the width to be auto and aligned to the center of the column?

– Ed

[kunzi]

I managed to set the max-height, set the width to auto and align horizontally to the center with margin-left: auto and margin-right: auto.

But how could I align the images vertically?

Also I only tested these with Chrome + osx.

[Swift Ideas – Ed]

Check this article – http://stackoverflow.com/questions/7273338/how-to-vertically-align-an-image-inside-div

Hope that helps!

– Ed