Question

我无法弄清楚为什么这个页面上的某些图片尺寸错误（其中2个看起来比其他图像小）。

https://www.violinschool.org/video-testing/

我已将它们全部重新裁剪为相同的尺寸（355x200，比例为16：9），因此必须有其他原因导致它。

我试图查看html和CSS（它是使用工具集类型的wordpress网站）来查看可能出错的内容，但无济于事。

Answer 1

问题不在图像中，而在于table。现在每个table-cell根据其内容采用动态宽度。如果一个table-cell包含更多内容，则会比其他内容更广泛。

在table-layout: fixed上添加table属性，然后所有table-cell将采用相同的宽度，您的问题将得到解决。

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%;
}

Answer 2

由于表中的<td>不是固定宽度，因此根据其中的内容得到宽度，直到宽度未在css中定义。

您可以使用2种解决方案。

首先在表格中添加table-layout:fixed。

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;
}

添加table-layout:fixed会限制表格显示每个相同宽度的单元格。

和第二使用<td>

中的宽度

当您在一行中使用精确的4 <td>时，您可以手动设置宽度width:25%。

td {
    border-top: 1px solid #ededed;
    padding: 6px 10px 6px 0;
    width: 25%;
}

Answer 3

尝试将此行添加到CSS文件中，看看是否有帮助：

table.wpv-loop.js-wpv-loop td {
    width: 25%;
}

导致这些图像尺寸出错的原因是什么？

3 个答案: