What's causing these image sizes to be wrong? - html

Question

I cannot work out why some of the images on this page are wrongly sized (2 of them appear smaller than the others).
https://www.violinschool.org/video-testing/
I have re-cropped them all to the same size (355x200, ratio 16:9) so there must be something else causing it.
Am trying to check the html and CSS (it's a wordpress site using Toolset Types) to see what might be wrong, but to no avail.

Answer 1

Try adding this line to your CSS file and see if it helps:
table.wpv-loop.js-wpv-loop td {
width: 25%;
}

Answer 2

As <td> in table are not fixed width they get the width according to the content inside it untill the width is not defined in css.
You can do it with 2 solutions.
First is Add table-layout:fixed in table.
table{
border-bottom: 1px solid #ededed;
border-collapse: collapse;
border-spacing: 0;
font-size: 14px;
line-height: 2;
margin: 0 0 20px;
width: 100%;
table-layout: fixed;
}
Adding table-layout:fixed will restrict the table to show each cell with same width.
and second Use width in <td>
As you are using exact 4 <td> in one row so you can give width manually width:25%.
td {
border-top: 1px solid #ededed;
padding: 6px 10px 6px 0;
width: 25%;
}

Answer 3

Problem is not in images but in table. Now each table-cell is taking dynamic width according to its content. If one table-cell has more content it will be wider than others.
Add table-layout: fixed property on table then all table-cell will take equal width and your problem will be fixed.
table {
border-bottom: 1px solid #ededed;
border-collapse: collapse;
table-layout: fixed;
border-spacing: 0;
font-size: 14px;
line-height: 2;
margin: 0 0 20px;
width: 100%;
}