时间戳

首页 > 解决方案 > 如何使 Twitter 上的图像不被裁剪？

html - 如何使 Twitter 上的图像不被裁剪？

问题描述

Twitter上的一个设计真的让我很困扰。在主提要上，所有带有图像的帖子都被裁剪了，如果我想查看完整的图像，我必须点击帖子才能看到它。我想改变这一点。我希望完整的图像出现在提要页面本身上。

所以我开始使用检查工具进行挖掘。A<div class="r-1adg3ll r-13qz1uu"/>是问题所在。它包含这个值

element.style {  
    padding-bottom: 56.25%;  
}

它基本上将图像的高度设置为0.5625 * (rendered-width). 我需要将此 padding-bottom 值更改为(actual-height/actual-width). 这样，渲染图像的高度将变为(actual-height/actual-width) * (rendered-width)。

就上下文而言，这是提要中经过裁剪的帖子的图像。 在此处输入图像描述

这是打开以显示完整图像的同一个帖子。 在此处输入图像描述

所以我对你们所有优秀的前端开发人员的问题是，我如何对提要中的所有图像执行此操作？我需要编写 chrome 扩展程序吗？或者我可以在开发控制台中编写一些代码以使其适用于提要中的所有图像。非常感谢任何帮助。

标签： htmlcssfrontendgoogle-chrome-devtools

解决方案

推荐阅读