Question

您需要页面中有关引导框架和CSS的帮助。感兴趣的部分仅是顶部，包括图像，图像标题，灰条和报价。在平板电脑尺寸更大的情况下，我需要顶部的图像与灰条重叠，并且顶部和底部之间的距离相等，随着屏幕变大而响应地调整大小，但不要超过宽度的图像大小300像素。灰色栏中的报价也应响应。我尝试了变换，在图像上缩放，但是图像标题被隐藏了。

  .president-section {
  background-color: #545454;
  margin: 1rem 0;
}

.president-details {
  padding-right: 0px;
  padding-left: 0px;
}

blockquote {
  color: #fff;
  display: block;
  font-weight: 700;
  font-style: italic;
  position: relative;
  font-size: 30px;
  line-height: 36px;
  padding: 5%;
}

@media screen and (max-width: 767px) {
  .president-details img {
    margin: 20px auto;
    display: block;
  }
}

@media screen and (min-width: 768px) {
  .president-section {
    width: 100vw;
    position: relative;
    margin-left: -50vw;
    margin-top: 100px;
    margin-bottom: 200px;
    left: 50%;
    height: 300px;
  }
  .president-details {
    transform: translate(-50px, -70px);
    width: 300px;
  }
  blockquote {
    font-size: 20px;
    line-height: 26px;
  }
  @media screen and (min-width: 992px) {
    blockquote {
      font-size: 30px;
      line-height: 36px;
    }
  }
  @media screen and (min-width: 1200px) {
    .quote {
      transform: translate(-100px, 0);
    }
  }

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container" style="background-color: #e5a09c;">
  <p>Cupcake ipsum dolor sit amet cake croissant fruitcake muffin. Sweet bonbon candy powder cheesecake muffin sesame snaps jujubes. Muffin macaroon cheesecake cookie souffl&eacute; cookie cheesecake lollipop candy canes. Halvah cotton candy sesame snaps
    chocolate bar. Sugar plum dessert drag&eacute;e macaroon chupa chups. Cake cheesecake wafer cotton candy. Danish jelly halvah jelly beans tootsie roll donut. Halvah cheesecake halvah jujubes sweet roll biscuit croissant wafer. Cake halvah chocolate
    bar sugar plum apple pie.</p>


  <div class="row president-section">
    <div class="container">
      <div class="row">
        <div class="col-12 col-md-5 col-lg-4">
          <div class="president-details">

            <img class="img-fluid" src="https://drive.google.com/uc?id=1n1Bc9Xnu6N2UEzTqXN5ZpRN_W8m6mhAG">

            <p class="president-name text-center"><strong>President's Name</strong></p>


          </div>


        </div>

        <div class="col-12 col-md-7 col-lg-8 quote">
          <div class="row">
            <blockquote>
              &ldquo;Cupcake ipsum dolor sit amet cake croissant fruitcake muffin. Sweet bonbon candy powder cheesecake muffin sesame snapsjujubes. Muffin macaroon cheesecake&rdquo; <cite>-Richard Something</cite>
            </blockquote>
          </div>
        </div>
      </div>

    </div>
  </div>

  <h3>Members</h3>

  <div class="row img-row">
    <div class="col-6 col-md-3"><img src="https://via.placeholder.com/163x240" /> <strong>Immediate Past President</strong>

      <div class="name">John Doe 1</div>
    </div>

    <div class="col-6 col-md-3"><img src="https://via.placeholder.com/163x240" /> <strong>Executive Director</strong>

      <div class="name">John Doe 2</div>
    </div>

    <div class="col-6 col-md-3"><img src="https://via.placeholder.com/163x240" /> <strong>President-Nominee</strong>

      <div class="name">John Doe 3</div>
    </div>
    <!-- Row 2 -->

    <div class="col-6 col-md-3"><img src="https://via.placeholder.com/163x240" /> <strong>John Doe 4</strong>

      <div class="term">Term: 2019&ndash;2022</div>
    </div>
  </div>
</div>

如何使图像调整大小并与周围内容快速重叠

0 个答案: