Images don’t show in the same dimensions

Hello, 

We tried to reproduce the same issue on our end, but we are not able to replicate it. For example, if we just copy the HTML element of each of your cells along with the link and image, on our Simple Table ( both Back-End and Front-End) all the images have the same size.

Here is a screenshot how it looks on a Front-End Page :

So, as long as we just don’t set any custom Column width, but just set up each cell with the same images as from your Table – there is no issue, as you can see.

But, for example, if we increase the width of a specific cell, by default the image width is set to “max width” to take up 100% of the cell;

so naturally, then the image would increase along with the cell width.

Can you please check did you set the Columns which have the larger image to be a bit wider than the others in the Back-End Editor of the Simple table?

It seems it might be the case, when we inspect the width of each column, the ones with the larger images are a bit wider.

Let us know if that helps.

If you wish to try a workaround to increase the width of some Columns while ‘forcing’ a specific image size;

there can be two says :

1. If you wish to force all Columns with images to have the same width with a specific ‘max-width’, you can do this :

.wpdt-c.wpDataTableContainerSimpleTable .wpdtSimpleTable td img {
    max-width: 200px !important;
    height: auto;
}

So this will change/set each Column that has an image to be a specific pixel width.

–

Or, if you do this :

.wpdt-c.wpDataTableContainerSimpleTable .wpdtSimpleTable td img {
    width: 200px !important;
    height: auto;
}

That will keep any custom Column width you set, it will just ‘force’ all images in the table to have a specific width and by default the image is centered inside the cell.

Custom code needs to be applied to the page where the Table is. Depending on what you’re using (Gutenberg blocks, or some page builder), adding the CSS or JS can be done in a few different ways.?

If you need help with adding custom CSS to the page, please take a look at this article.

Let us know if that helps and if you have any questions.?

Kind regards.

• This reply was modified 11 months, 2 weeks ago by wpDataTables.