我正在开发一个简单的 HTML/CSS/Javascript + jQuery 应用程序,它根据 API 返回的数据显示嵌入的 Facebook 帖子。一切都运行良好,除了我很难设置帖子本身的宽度+高度。我想将宽度/高度设置为
auto
或 fit-content
以便框架能够拉伸以适合内容,但这些样式规则没有效果。如果我以像素为单位设置特定的宽度/高度,我会看到变化,但这意味着我必须设置每个“最宽”帖子的宽度,然后具有较小图像的帖子周围有大量空白。高度也一样。
当有大量我自己没有编写的样板代码时,处理样式总是很棘手......但我想知道为什么我能够更改像素的宽度/高度,但无法使用规则如auto
。如果有人知道发生了什么,我很想更好地理解这一点。
这是一个 codepen,也请参阅下面的代码。你会发现,如果你将宽度设置为700px
,高度设置为
800px
,你可以看到完整的内容,但是空白太多,帖子总体来说太大了。
facebookArr = [{
post_id: "959689765514464",
post_type: "FB"
},
{
post_id: "959696358847138",
post_type: "FB"
},
{
post_id: "959720495511391",
post_type: "FB"
},
{
post_id: "959725872177520",
post_type: "FB"
},
{
post_id: "959763208840453",
post_type: "FB"
},
{
post_id: "960116688805105",
post_type: "FB"
},
{
post_id: "960201025463338",
post_type: "FB"
},
{
post_id: "960245285458912",
post_type: "FB"
},
{
post_id: "960383525445088",
post_type: "FB"
},
{
post_id: "960441922105915",
post_type: "FB"
},
{
post_id: "960785228738251",
post_type: "FB"
},
{
post_id: "960845102065597",
post_type: "FB"
}
];
// Store container in variable
let facebookContainer = document.getElementById("facebook-feed-container");
facebookArr.forEach((post) => {
const postId = post.post_id;
const postContainer = document.createElement("div");
facebookContainer.append(postContainer);
postContainer.classList.add("post");
$(".post--title").hide();
// Append relative container to DOM parent container
const postFrame = document.createElement("iframe");
postContainer.append(postFrame);
postFrame.classList.add("facebook-post-frame");
postFrame.id = `fb-post__${postId}`;
postFrame.src = `https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2FIconicCool%2Fposts%2F${postId}&show_text=true`;
postFrame.frameborder = "0";
postFrame.allowfullscreen = "true";
postFrame.allow =
"autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share";
});
#facebook-feed-container {
display: flex;
flex-direction: row;
row-gap: 1rem;
column-gap: 3rem;
padding: 1rem;
flex-wrap: wrap;
}
.facebook-post-frame {
width: fit-content; //does not work, must set px
height: fit-content; //does not work, must set px
}
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<div id="facebook-feed-container">
</div>
facebookArr.forEach((post) => {
const postId = post.post_id;
const postContainer = document.createElement("div");
facebookContainer.append(postContainer);
postContainer.classList.add("post");
// Append relative container to DOM parent container
const postFrame = document.createElement("iframe");
postContainer.append(postFrame);
postFrame.classList.add("facebook-post-frame");
postFrame.id = `fb-post__${postId}`;
postFrame.src = `https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2FIconicCool%2Fposts%2F${postId}&show_text=true`;
postFrame.frameborder = "0";
postFrame.allowfullscreen = "true";
postFrame.allow =
"autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share";
// Listen for the load event on the iframe
postFrame.onload = function () {
// Adjust the width and height of the iframe based on its content
const contentDocument = postFrame.contentDocument;
if (contentDocument) {
postFrame.style.width = contentDocument.body.scrollWidth + "px";
postFrame.style.height = contentDocument.body.scrollHeight + "px";
}
};
});