为嵌入的 Facebook 帖子设置自动宽度

Question

我正在开发一个简单的 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>

Answer 1

  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";
        }
      };

});