响应式图像 bootstrap5.2 不起作用

【问题标题】：responsive image bootstrap5.2 doesn't work响应式图像 bootstrap5.2 不起作用
【发布时间】：2022-08-02 20:36:20
【问题描述】：

我正在尝试响应此标签中的图像： img src=\"images/5902216.png\" alt=\"\" style=\"width: 100%;\" 但它没有\'由于某种原因无法工作。我正在使用引导程序 5.2。

HTML

<!DOCTYPE html>
<html lang=\"en\">

<head>
   <meta charset=\"UTF-8\">
   <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">
   <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">
   <link href=\"https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css\" rel=\"stylesheet\"
       integrity=\"sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx\" crossorigin=\"anonymous\">
   <link rel=\"stylesheet\" href=\"css/style.css\">
   <link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css\">
   <script src=\"https://kit.fontawesome.com/1aca141b14.js\" crossorigin=\"anonymous\"></script>
   <title>Portfolio</title>
</head>

<body>
   <nav class=\"navbar navbar-expand-lg fixed-top navbar-custom\">
       <div class=\"container\">
           <a class=\"navbar-brand\" href=\"#\">
               <img src=\"logo.png\" alt=\"Avatar Logo\" style=\"width:40px;\" class=\"rounded-pill\">
           </a>

           <button class=\"navbar-toggler\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#navbarNav\"
               aria-controls=\"navbarNav\" aria-expanded=\"false\" aria-label=\"Toggle navigation\">
               <span class=\"navbar-toggler-icon\"></span>
           </button>

           <div class=\"collapse navbar-collapse justify-content-center\" id=\"navbarNav\">
               <ul class=\"navbar-nav justify-content-center\">
                   <li class=\"nav-item\">
                       <a class=\"nav-link\" href=\"#scrollspyHeading1\">Home</a>
                   </li>
                   <li class=\"nav-item\">
                       <a class=\"nav-link\" href=\"#scrollspyHeading2\">Services</a>
                   </li>
                   <li class=\"nav-item\">
                       <a class=\"nav-link\" href=\"#scrollspyHeading3\">Compétences</a>
                   </li>
                   <li class=\"nav-item\">
                       <a class=\"nav-link\" href=\"#scrollspyHeading4\">Portfolio</a>
                   </li>

                   <li class=\"nav-item\">
                       <a class=\"nav-link\" href=\"#scrollspyHeading6\">À Propos</a>
                   </li>
                   <li class=\"nav-item\">
                       <a class=\"nav-link\" href=\"#scrollspyHeading7\">Contact</a>
                   </li>
               </ul>
           </div>
       </div>
   </nav>


   <div id=\"carouselExampleFade\" class=\"carousel slide carousel-fade\" data-bs-ride=\"carousel\">
       <div class=\"carousel-inner\">
           <div class=\"carousel-item active\">
               <img src=\"images/114-1144561_copyright-free-images-on-desk-with-laptop-and.jpg\" class=\"d-block w-100\"
                   style=\"filter: brightness(10%);\" alt=\"...\">
               <div class=\"carousel-caption d-none d-md-block\">
                   <h5>Portfolio</h5>
                   <p>Développeur Web Indépendant</p>
               </div>
           </div>
           <div class=\"carousel-item\">
               <img src=\"images/269-2698560_high-resolution-laptop-desktop-wallpaper-hd.jpg\" class=\"d-block w-100\"
                   style=\"filter: brightness(10%);\" alt=\"...\">
               <div class=\"carousel-caption d-none d-md-block\">
                   <h5 class=\"text-center\">Création de sites web</h5>
                   <p class=\"text-center\">Site vitrine, e-commerce, forum et autres</p>
               </div>
           </div>
           <div class=\"carousel-item\">
               <img src=\"images/10705380.jpg\" class=\"d-block w-100\" style=\"filter: brightness(10%);\" alt=\"...\">
               <div class=\"carousel-caption d-none d-md-block\">
                   <h5 class=\"text-center\">Web design, conception graphiques</h5>
                   <p class=\"text-center\">Logos, plaquettes publicitaire, cartes de visites,
                       newsletters</p>
               </div>
           </div>
       </div>
       <button class=\"carousel-control-prev\" type=\"button\" data-bs-target=\"#carouselExampleFade\" data-bs-slide=\"prev\">
           <span class=\"carousel-control-prev-icon\" aria-hidden=\"true\"></span>
           <span class=\"visually-hidden\">Previous</span>
       </button>
       <button class=\"carousel-control-next\" type=\"button\" data-bs-target=\"#carouselExampleFade\" data-bs-slide=\"next\">
           <span class=\"carousel-control-next-icon\" aria-hidden=\"true\"></span>
           <span class=\"visually-hidden\">Next</span>
       </button>
   </div>
   <section class=\"caseservices\" style=\"padding: 4%;\">
       <div class=\"container text-center\" href=\"scrollspyHeading1\">
           <h1>MES SERVICES</h1>
           <h3>Des prestations adaptées à vos besoins</h3>
       </div>
       <div class=\"container text-center\" href=\"scrollspyHeading2\">
           <div class=\"row\">
               <div class=\"col\">
                   <div class=\"row align-items-center\">
                       <div class=\"col-10\">
                           <h5 class=\"text-end\">Gestion de projets web</h5>
                           <p class=\"text-end\">Site vitrine, corporate, évènementiel, e-commerce, intranet, application
                               mobile.
                           </p>
                       </div>
                       <div class=\"col-2\">
                           <i class=\"fa-solid fa-laptop-code fa-2xl\"></i>
                       </div>

                       <div class=\"col-10\">
                           <h5 class=\"text-end\">Intégration Web</h5>
                           <p class=\"text-end\">Des intégrations (X)HTML / CSS respectueuses des standards du Web.</p>
                       </div>
                       <div class=\"col-2\">
                           <i class=\"fa-solid fa-code fa-2xl\"></i>
                       </div>

                       <div class=\"col-10\">
                           <h5 class=\"text-end\">Développements spécifiques</h5>
                           <p class=\"text-end\">Des outils adaptés à votre coeur de métier,
                               applications & solutions personnalisées.</p>
                       </div>
                       <div class=\"col-2\">
                           <i class=\"fa-solid fa-wrench fa-2xl\"></i>
                       </div>

                       <div class=\"col-10\">
                           <h5 class=\"text-end\">Référencement naturel</h5>
                           <p class=\"text-end\">Affichage sémantique des informations,
                               des pages propres pour un référencement optimal.</p>
                       </div>
                       <div class=\"col-2\">

                           <i class=\"img-fluid material-icons\"><img src=\"images/5902216.png\" alt=\"\" style=\"width: 100%;\"></i>
                       </div>
                   </div>
               </div>
               <div class=\"col\">
                   <img src=\"images/index.jpeg\" class=\"d-block w-100\" alt=\"...\">
               </div>
               <div class=\"col\">
                   <div class=\"row align-items-center\">
                       <div class=\"col-2\">

                           <i class=\"img-fluid material-icons\"><img
                                   src=\"images/kisspng-icon-design-web-development-responsive-web-design-black-brush-5afd4d493dd9d2.7237427015265498332534.png\"
                                   alt=\"\" style=\"width: 100%;\"></i>
                       </div>
                       <div class=\"col-10\">
                           <h5 class=\"text-start\">Conception graphique & Webdesign</h5>
                           <p class=\"text-start\">Logos, templates Web, plaquettes publicitaires,
                               cartes de visite, newsletters...</p>
                       </div>

                       <div class=\"col-2\">

                           <i class=\"img-fluid material-icons\"><img src=\"images/3938579.png\" alt=\"\" style=\"width: 100%;\"></i>

                       </div>
                       <div class=\"col-10\">
                           <h5 class=\"text-start\">Dynamisme des pages</h5>
                           <p class=\"text-start\">Des animations de contenu non intrusives
                               pour embellir votre projet.</p>
                       </div>

                       <div class=\"col-2\">

                           <i class=\"img-fluid material-icons\"><img src=\"images/2739572-200.png\" alt=\"\" style=\"width: 100%;\"></i>
                       </div>
                       <div class=\"col-10\">
                           <h5 class=\"text-start\">Interface d\'administration</h5>
                           <p class=\"text-start\">Outils spécifiques au bon fonctionnement
                               de votre entreprise.</p>
                       </div>

                       <div class=\"col-2\">

                           <i class=\"img-fluid material-icons\"><img src=\"images/1027666.png\" alt=\"\" style=\"width: 100%;\"></i>
                       </div>
                       <div class=\"col-10\">
                           <h5 class=\"text-start\">Responsive design</h5>
                           <p class=\"text-start\">Compatible tous supports, tablette & application mobile.</p>
                       </div>


                   </div>
               </div>
           </div>

           <p>Compatible Mobile, Tablettes & P.C</p>
           <h3>Développement Web Responsive</h3>
       </div>
   </section>

   <div class=\"container text-center\" style=\"padding: 4%;\" href=\"scrollspyHeading3\">
       <h1>MES COMPÉTENCES</h1>
       <h3>Des compétences à votre service</h3>
       <div class=\"container text-center\">
           <div class=\"row\">
               <div class=\"col text-start\">
                   <h4>Domaines de compétences</h4>
                   <h6><i class=\"fa-solid fa-circle-check\" style=\"padding-right: 1%;\"></i> Gestion de projets web </h6>
                   <p style=\"font-style: italic;\">Site vitrine, corporate, évènementiel, e-commerce, intranet,
                       application
                       mobile.</p>

                   <h6> <i class=\"fa-solid fa-circle-check\" style=\"padding-right: 1%;\"></i>Conception graphique &
                       Webdesign </h6>
                   <p style=\"font-style: italic;\">Logos, templates Web, plaquettes publicitaires, cartes de visite,
                       newsletters...</p>

                   <h6><i class=\"fa-solid fa-circle-check\" style=\"padding-right: 1%;\"></i>Applications spécifiques et
                       Interface d\'administration</h6>
                   <p style=\"font-style: italic;\">PHP - MySQL - AJAX / ASP.NET - C# - SQL</p>

                   <h6><i class=\"fa-solid fa-circle-check\" style=\"padding-right: 1%;\"></i>Mise en place / Modification
                       / Gestion de CMS</h6>
                   <p style=\"font-style: italic;\">Wordpress, Joomla, Prestashop, phpBB, IPBoard</p>

                   <h6><i class=\"fa-solid fa-circle-check\" style=\"padding-right: 1%;\"></i>Intégration (X)HTML / CSS
                   </h6>
                   <p style=\"font-style: italic;\">Codage à la main respectueux des standards du Web</p>

                   <h6> <i class=\"fa-solid fa-circle-check\" style=\"padding-right: 1%;\"></i>Dynamise des pages par
                       JavaScript / AJAX </h6>
                   <p style=\"font-style: italic;\">jQuery, Prototype, Mootools, Scriptaculous</p>

                   <h6><i class=\"fa-solid fa-circle-check\" style=\"padding-right: 1%;\"></i>Validation W3C, WAI &
                       référencement naturel SEO</h6>
                   <p style=\"font-style: italic;\"> Accessibilité & ergonomie des pages web </p>

                   <h6><i class=\"fa-solid fa-circle-check\" style=\"padding-right: 1%;\"></i> Conception multi-plateformes
                   </h6>
                   <p style=\"font-style: italic;\">Compatible tous supports, tablette & application mobile</p>
               </div>

               <div class=\"col\">
                   <h1>Compétences en développement</h1>
                   <div class=\"skills-bar\">
                       <div class=\"bar\">
                           <div class=\"info\">
                               <span>HTML/CSS</span>
                           </div>
                           <div class=\"progress-line html\"><span></span></div>
                       </div>


                       <div class=\"bar\">
                           <div class=\"info\">
                               <span>JAVASCRIPT/JQUERY</span>
                           </div>
                           <div class=\"progress-line javascript\"><span></span></div>
                       </div>


                       <div class=\"bar\">
                           <div class=\"info\">
                               <span>PHP</span>
                           </div>
                           <div class=\"progress-line php\"><span></span></div>
                       </div>


                       <div class=\"bar\">
                           <div class=\"info\">
                               <span>laravel</span>
                           </div>
                           <div class=\"progress-line python\"><span></span></div>
                       </div>


                       <div class=\"bar\">
                           <div class=\"info\">
                               <span>MYSQL</span>
                           </div>
                           <div class=\"progress-line mysql\"><span></span></div>
                       </div>

                   </div>
               </div>

               <h1 class=\"text-center\">Une idée ? Un projet ? N\'hésitez pas à demander un devis ! [GRATUIT]</h1>
           </div>
       </div>
   </div>

   <div class=\"container text-center\" style=\"padding: 4%;\" href=\"scrollspyHeading4\">
       <h1>MES PROJETS</h1>
       <h4>Une partie des projets sur lesquels j\'ai travaillé</h4>
   </div>

   <div class=\"container text-center\" style=\"padding: 4%;\" href=\"scrollspyHeading6\">
       <h1>À PROPOS</h1>
       <h4>Je suis développeur web freelance et j\'aime ça !</h4>
       <div class=\"row\">
           <div class=\"col\">
               <h4 class=\"text-start\">Un développeur web passionné !</h4>
               <p class=\"text-start\">Ma passion pour le développement web commence en 2003 et m\'a demandé un changement
                   radical de cursus
                   afin de pouvoir pleinement l\'exploiter.</br> </br>

                   Dès lors, je mis tout en oeuvre pour percer dans cette voie, tout en prenant du plaisir sur les
                   divers projets développés.</br> </br>

                   En Mai 2009, je décide de devenir développeur web indépendant après plusieurs postes en tant que
                   développeur web « full-stack » réussis, qui me conforteront dans cette idée afin de toucher un plus
                   large panel de domaines d\'activités, voir du pays et conquérir le monde !</p>
           </div>

           <div class=\"col\">
               <img src=\"images/index.jpeg\" class=\"d-block w-100\" alt=\"...\">
           </div>

           <div class=\"col\">

               <h4 class=\"text-start\">Expérience en développement</h4>

               <p class=\"text-start\"> Mon expérience acquise au fil des projets me permet de mieux comprendre les
                   attentes d\'un client
                   et de
                   répondre précisement au besoin demandé en fonction du domaine d\'activité.</p>

               <p class=\"text-start\">Du site vitrine au projet plus complexe, je vous propose une expertise et un
                   développement web qui
                   correspond à vos attentes & à vos besoins.</p>

               <h3 class=\"text-start\">Un tarif adapté à votre projet</h3>

               <p class=\"text-start\"> Travaillant régulièrement avec des PME, associations ou particuliers, je vous
                   propose des solutions
                   à
                   votre portée & adaptée à votre budget.</p>

           </div>
       </div>
   </div>

   <div class=\"container text-center\" href=\"scrollspyHeading7\" style=\"padding: 4%;\">
       <h1>CONTACTEZ-MOI</h1>
       <h3 style=\"background-color: grey;padding: 1%;\">Une idée ? Un projet ? N\'hésitez pas à demander un devis !
           [GRATUIT]</h3>

       <div class=\"row align-items-center\" style=\"padding: 3%;\">
           <div class=\"col text-start\">
               <div class=\"row\">
                   <div class=\"col\">
                       <div class=\"row\">

                           <div class=\"col-2 align-self-center\">
                               <i class=\"material-icons align-items-center\"><img src=\"images/img_288659.png\" alt=\"\"
                                       style=\"width: 50%;\"></i>
                           </div>
                           <div class=\"col-10\"
                               style=\"padding-top: 3%; padding-bottom: 3px;  border-bottom: 1px solid rgb(235, 232, 232);\">
                               <h6>ADRESSE</h6>
                               <p>45, allée des Grives 83390 Cuers</p>
                           </div>


                           <div class=\"col-2 align-self-center\">
                               <i class=\"img-fluid material-icons\"><img src=\"images/free-phone-icon-14-thumb.png\" alt=\"\"
                                       style=\"width: 50%;\"></i>
                           </div>
                           <div class=\"col-10\"
                               style=\"padding-top: 3%; padding-bottom: 3px;  border-bottom: 1px solid rgb(235, 232, 232);\">
                               <h6>Téléphone</h6>
                               <p>(+33) 6.15.42.10.45</p>
                           </div>


                           <div class=\"col-2 align-self-center\">
                               <i class=\"img-fluid material-icons\"><img src=\"images/Vector-Email-Symbol-PNG-Image.png\" alt=\"\"
                                       style=\"width: 50%;\"></i>
                           </div>
                           <div class=\"col-10\" style=\"padding-top: 3%; border-bottom: 1px solid rgb(235, 232, 232);\">
                               <h6>E-mail</h6>
                               <p>contact@mcrevoulin.com</p>
                           </div>


                       </div>
                   </div>
               </div>
           </div>
           <div class=\"col\">
               <iframe
                   src=\"https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d84484.16954505828!2d7.69203969606045!3d48.56905316140801!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4796c8495e18b2c1%3A0x971a483118e7241f!2sStra%C3%9Fburg%2C%20Frankreich!5e0!3m2!1sde!2sde!4v1658941325979!5m2!1sde!2sde\"
                   width=\"300\" height=\"200\" style=\"border:0;\" allowfullscreen=\"\" loading=\"lazy\"
                   referrerpolicy=\"no-referrer-when-downgrade\"></iframe>
               <!-- <iframe
                   src=\"https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d316530.06898113067!2d38.75890546037433!3d51.69843674434513!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x413b2f5ce874e813%3A0x48d94c0efba762bd!2sWoronesch%2C%20Oblast%20Woronesch%2C%20Russland!5e0!3m2!1sde!2sde!4v1658941426253!5m2!1sde!2sde\"
                   width=\"300\" height=\"200\" style=\"border:0;\" allowfullscreen=\"\" loading=\"lazy\"
                   referrerpolicy=\"no-referrer-when-downgrade\"></iframe> -->
           </div>
           <div class=\"col\">
               Column
           </div>
       </div>

   </div>


   <script src=\"js/javascript.js\"></script>
   <script src=\"https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js\"
       integrity=\"sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa\"
       crossorigin=\"anonymous\"></script>
</body>

</html>

当我缩小屏幕以将图像放在此缩小标签中时，就像在手机上一样，我们看不到它们。在此链接中，您可以看到我的代码 https://testportfolio111.000webhostapp.com/ 的结果我已将 img-fluid 添加到 seo 图片，但这不起作用。当屏幕最小的图片响应时我该怎么办？

    标签： html css twitter-bootstrap


    【解决方案1】：

    您忘记为响应式图像添加引导类。 将类“.img-fluid”添加到您的图像标签。

              <img class="img-fluid" src=".." />

    【讨论】：

      猜你喜欢
      • 2015-04-23
      • 1970-01-01
      • 2022-02-18
      • 1970-01-01
      • 2014-12-01
      • 2013-08-30
      • 1970-01-01
      • 1970-01-01
      • 2012-11-23
      相关资源
      最近更新 更多
      热门标签
      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode