Object 引导v5响应iframe不工作，窗口太小映像不响应_Object_Iframe_Responsive Design_Embed_Bootstrap 5

Object 引导v5响应iframe不工作，窗口太小映像不响应

object iframe responsive-design

Object 引导v5响应iframe不工作，窗口太小映像不响应,object,iframe,responsive-design,embed,bootstrap-5,Object,Iframe,Responsive Design,Embed,Bootstrap 5,我花了几个小时试图在BootstrapV5中使用iframe或对象嵌入响应性svg图像。使用此代码： <!doctype html> <html lang="en"> <head>  <meta charset="utf-8"> <meta name="viewport" content=

我花了几个小时试图在BootstrapV5中使用iframe或对象嵌入响应性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>


你好，世界！
你好，世界！
...

不幸的是，该图像似乎没有响应，似乎被一帧剪切，如下所示：

我做错了什么？我也尝试使用

对象

，但仍然不起作用。

您提供的信息不足以完全理解问题并给出准确的解决方案。无论如何，.embed响应类必须与某些指定纵横比的类组合。例如：embed-responsive-16by9。但4.X版本完全支持所有这些。对于今天的5。x，你应该考虑类的比率族。请看@CristiánOrmazábal谢谢，我已经尝试过使用这些类，但仍然不起作用，我将尝试做一个简单的例子。