时间戳

首页 > 解决方案 > Bootstrap v5 响应式 iframe 不工作，窗口太小图像不响应

object - Bootstrap v5 响应式 iframe 不工作，窗口太小图像不响应

问题描述

我花了几个小时尝试使用 iframe 或 Bootstrap v5 中的对象嵌入响应式 svg 图像。使用此代码：

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
   
    <h1>Hello, world!</h1>
    <section id="about" class="about py-5 ">
        <div class="row align-items-center container py-5 mx-auto">
          <div class="text col-lg-6 col-md-12 col-12">
           ...
          </div>
          <div class="col-lg-6 col-md-12 col-12">
          <div class="embed-responsive embed-responsive-16by9">
            <iframe class="embed-responsive-item" width="100%"  src='https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/AJ_Digital_Camera.svg' allowfullscreen></iframe>
          </div>
          </div>
        </div>
      </section>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>


  </body>
</html>

不幸的是，图像似乎没有响应，并且看起来被一个框架切割，如下所示： 在此处输入图像描述

我究竟做错了什么？我也尝试使用object，但还是不行。

标签： objectiframeresponsive-designembedbootstrap-5

解决方案

推荐阅读