如何在 6 列类中增加图像的大小答案

【问题标题】：How to increase the size of an image in 6 column class如何在 6 列类中增加图像的大小
【发布时间】：2021-09-24 08:31:59
【问题描述】：

我无法将图像拉伸到右上角。它应该是响应式的。我的代码集成在 wordpress 中。您可以在类成员资格ImgBox 中看到图像。那么如何增加图像的大小。

代码如下。

.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>

【问题讨论】：

请点击edit，然后点击[<>] sn-p 编辑器并发布不带PHP 的RENDERED HTML。您可以在 placeholder.com 上找到图片
完成了。你可以检查
未完成。我给你做了一个sn-p。 HTML 无效，没有图像或引导文件
我想要 987 x 612 的图像。
请帮忙。它在一行中。

标签： html css wordpress bootstrap-4 wordpress-theming

【解决方案1】：

因为它位于具有最大宽度和一些边距的容器类中，因此您的图像不会超出其容器

你可以把图片放在容器外面，它会延伸到页面的边缘

.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>

【讨论】：