文章/答案/技术大牛

发布

社区首页 >问答首页 >是什么导致这些图像大小出错？

问是什么导致这些图像大小出错？
EN

Stack Overflow用户

提问于 2016-07-01 06:53:26

回答 3查看 45关注 0票数 3

我不明白为什么这个页面上的一些图片尺寸错误(其中2张看起来比其他的小)。

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

我把它们都剪成了同样的尺寸(355x200，比16:9)，所以一定有别的原因。

我试着检查html和CSS (这是一个使用Toolset类型的wordpress站点)，看看可能出了什么问题，但没有用。

css

wordpress

html

回答 3

Stack Overflow用户

回答已采纳

发布于 2016-07-01 07:01:02

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

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

票数 1

Stack Overflow用户

发布于 2016-07-01 06:56:17

问题不在图像中，而是在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%;
}

票数 1

Stack Overflow用户

发布于 2016-07-01 06:59:28

由于表中的<td>不是固定的宽度，它们根据其内部的内容获得宽度，直到在css中没有定义宽度。

你可以用两个解决方案来完成它。

首先是在表中添加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%;
}

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/38138876

复制

相似问题

问是什么导致这些图像大小出错？
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问是什么导致这些图像大小出错？EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问是什么导致这些图像大小出错？
EN