css - Facebook-like-box 中的图片帖子对于容器来说太大了

Question

我们学校有一个 Wordpress 网站，我们想在侧边栏上集成 FB 之类的框。

由于点赞框的最小宽度为 292-300px，我们不得不寻找一个插件，可以将其缩小到小于最小设置像素。也就是说，我们使用 Weblizar 的 Facebook 插件，因为我们可以将框的宽度设置为 262px。 (参见 here)。然而，在小部件的流中，我们帖子的图像似乎超出了容器。换了不同的插件，以为是主题冲突，试过在FB开发者网站上看预览，好像都一样。

我们已经阅读了有关为点赞框自定义 CSS 的论坛，但似乎很多选项最终都变得无用，因为 FB 一直在更改某些内容。你能给我们一些关于如何自定义图像宽度的建议吗？这根本不是关于框的总宽度，因为我们试图增加侧边栏的宽度并尝试将其测试为 600px 宽度。效果还是一样的。希望你能帮助我们。

Answer 1

实际上，点赞框并没有真正的最小值。只需从 facebook 开发人员生成一个 like box 代码 here , 然后粘贴到常规的 wordpress 文本小部件中。

现在为了调整它的大小，你必须像这样添加内联样式:

<div style="width: 150px; overflow: hidden;" class="fb-like-box" data-href="https://www.facebook.com/FacebookDevelopers" data-colorscheme="light" data-show-faces="true" data-header="true" data-stream="false" data-show-border="true"></div>

我在他们的演示代码中添加了 150px 的宽度。您还可以将此代码包装在另一个 div 中，并使用 overflow: hidden; 为其指定固定的高度/宽度。

只要确保您“裁剪”的宽度不会裁剪照片，这样看起来就很完美。