Question

我们学校有一个Wordpress网站，我们希望在侧栏上集成FB框。

由于类似框的最小宽度为292-300px，我们必须寻找可以减少到小于最小设置像素的插件。也就是说，我们使用了Weblizar的Facebook插件，因为我们可以将盒子的宽度设置为262px。（见here）。但是，在小部件的流中，我们帖子的图像似乎超出了容器。我们试图改变成不同的插件，认为这是一个主题冲突，并试图查看FB开发者网站的预览，但它似乎都是一样的。

我们已经阅读了关于类似框的自定义CSS的论坛，但似乎很多选项最终变得无用，因为FB不断改变某些东西。您能否就如何自定义图像宽度向我们提出任何建议？这根本不是盒子的总宽度，因为我们试图增加侧边栏的宽度，并尝试将其测试到600px的宽度。效果仍然相同。希望你能帮助我们。

Answer 1

实际上，类似的盒子没有真正的最小值。只需从Facebook开发人员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;为其指定固定的高度/宽度。

请确保您在不切割照片的宽度上“剪切”它，这样看起来很完美。

Answer 2

另一种方法，如果图像溢出是问题，那就是定位窗口小部件中的所有图像并给它们一个最大高度和最大宽度百分比值，这样它们就不会开箱即用。您必须测试百分比才能找到合适的尺寸。

您可以将以下内容添加到style.css文件中：

.fb-like-box > img {
  max-height: 40%; /* or whatever percent you find suitable */
  max-width: 40%;
}

＆＃34; .fb-like-box＆＃34;是您的小部件的类，＆＃34;＆gt;＆＃34;选择该小部件的子节点并定位所有内部的内容。

有一点需要注意，只有当您使用的图像具有相同的尺寸和方向时，这才会真正起作用。

希望如果您仍需要澄清，这会有所帮助！

类似于Facebook的图像帖子对于容器来说太大了

2 个答案: