[英]How to increase the size of an image in 6 column class
我无法将图像拉伸到全宽直到右角。 它应该是响应式的。 我的代码集成在 wordpress 中。 您可以在类membershipImgBox 中查看图像。 那么如何增加图像的大小。
代码如下。
.membershipbox { height: 100%; } .img-fluid { max-width: 100%; height: auto; }
<head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> <link rel="preconnect" href="https://fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap" rel="stylesheet"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous" /> <!-- for icons --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css" /> </head> <section class="deliveringSection "> <div class="container"> <div class="row"> <div class="col-lg-6 col-xs-12 img-box-2" data-aos="fade-up" data-aos-easing="ease" data-aos-duration="2000"> <div id="img-2" class="membershipImgBox"> <img src="https://via.placeholder.com/987/FF0000/FFFFFF?Text=Down.com%20C/O%20https://placeholder.com/" class="img-fluid d-block mb-5 mb-lg-0 mx-auto" alt="" /> </div> </div> <div class="col-lg-6 col-xs-12 order-lg-first" data-aos="fade-up" data-aos-easing="ease" data-aos-duration="2000"> <div class="deliveringContent"> <div class="sectionHeading" data-aos="fade-up" data-aos-easing="ease" data-aos-duration="2000"> <h2> Delivering quality projects to </h2> </div> <div class="sectionHeadingTwo" data-aos="fade-up" data-aos-easing="ease" data-aos-duration="2000"> <h2><b>World Class </b></h2> <h2>Standards</h2> <div class="about-border"></div> </div> <p>We work around three important elements of our business to create world-class innovative interior design solutions to meet our clients' functional & aesthetic requirements providing unique tailored space solutions. We integrate the client's brand and business strategy, placing great emphasis on the brand's values and aspirations to bring projects to fruition, taking our strong working relationship to the next level..</p> <a href="" class="btn btn-primary btnWeight"> about us </a> </p> </div> </div> </div> </div> </div> </section>
因为它位于具有最大宽度和一些边距的容器类内，因此您的图像不会超出其容器
您可以将图像放在容器外，它会拉伸到页面的边缘
.membershipbox { height: 100%; } .img-fluid { max-width: 100%; height: auto; }
<head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> <link rel="preconnect" href="https://fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap" rel="stylesheet"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous" /> <!-- for icons --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css" /> </head> <section class="deliveringSection "> <div id="img-2" class="membershipImgBox"> <img src="https://via.placeholder.com/987x612" class="img-fluid d-block mb-5 mb-lg-0 mx-auto" alt="" /> </div> <div class="container"> <div class="row"> <div class="col-lg-6 col-xs-12 img-box-2" data-aos="fade-up" data-aos-easing="ease" data-aos-duration="2000"> </div> <div class="col-lg-6 col-xs-12 order-lg-first" data-aos="fade-up" data-aos-easing="ease" data-aos-duration="2000"> <div class="deliveringContent"> <div class="sectionHeading" data-aos="fade-up" data-aos-easing="ease" data-aos-duration="2000"> <h2> Delivering quality projects to </h2> </div> <div class="sectionHeadingTwo" data-aos="fade-up" data-aos-easing="ease" data-aos-duration="2000"> <h2><b>World Class </b></h2> <h2>Standards</h2> <div class="about-border"></div> </div> <p>We work</p> <a href="" class="btn btn-primary btnWeight"> about us </a> </p> </div> </div> </div> </div> </div> </section>
如何增加图像大小但不增加其位于其中的容器的大小
[英]How to increase image size but not increase size container its located within
如何增加类中某物的大小，而不是类中其他元素的大小？
[英]How to increase size of something in class, but not other elements in class?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.