iframe 中的 Chrome 图像无法调整大小

Question

我正在开发文件共享服务，并且从 Chrome 中得到了这种奇怪的行为，但从 Firefox 中没有： 我的服务器上托管有一个图像，我正在尝试在 iframe 中使用它。 （这对我的项目来说是必要的）在 Firefox 上，图像显示的大小正确，它被缩放到我的代码中定义的 iframe 的大小：

<style>
      body {
        background-color: black;
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        overflow: hidden;
      }

      #card {
        background-color: gray;
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        text-align: center;
        position: relative;
        overflow: hidden;
      }

      iframe {
        max-width: 100%;
        max-height: 100%;
      }

      #card p {
        margin-top: 10px; /* Add some space between the iframe and the paragraph */
      }
</style>
<div id="card">
    <iframe src="/iframe" frameborder="0"></iframe>
    <p id="desc">This is a one-sentence paragraph.</p>
</div>

只有 chrome 和基于 chrome 的浏览器会崩溃。这是为什么？我可以修复它吗？

我尝试过使用宽度：100％，高度：100％，网站建设者，提供html页面而不仅仅是图像并恢复回来，我尝试更新chrome，brave，edge，但无济于事

Answer 1

这是因为 Firefox 和 Edge 的图像样式各不相同，并且您无法将 CSS 直接应用于 iframe 内的元素。

但是你可以使用 javascript 获得相同的结果：

<div id="card">
    <iframe src="/iframe" frameborder="0" onload="correctImage()"></iframe>
    <p id="desc">This is a one-sentence paragraph.</p>
</div>
<script>
    function styleImg() {
        const iframe = document.querySelector("iframe")
        const innerDoc = iframe.contentDocument || iframe.contentWindow.document;
        const image = innerDoc.getElementsByTagName('img')[0]
        image.style.maxWidth = '100%';
        image.style.maxHeight = '100%';
    }
</script>