如何在引导程序中制作垂直和水平对齐的响应式图像

debugcn 发表于 Dev

垫_-_

作为练习的一部分，我正在将 PSD 制作成 HTML 网站。如何使用引导程序制作响应式，对齐水平和垂直中心图像？当屏幕减小时我遇到问题，它退出屏幕，即使我向其添加 img-responsive 类，图像也不希望响应。我尝试使用 flexbox 但图像的减少很糟糕，图像变得非常小。

.expertise {
    background-color: #f7f7f7;
}

.expertise__text {
    margin: 5em 0 0 5em;
}

.expertise__text h1 {
    color: #222222;
    font-family: Montserrat;
    font-size: 40px;
    font-weight: 700;
    letter-spacing: -2px;
}

.expertise__text-p {
    margin: 2em 0 4em 0;
}

.expertise__items {
    padding: 0 0 0 0;
}

.expertise__items h2 {
    color: #222222;
    font-family: Montserrat;
    font-size: 22px;
    font-weight: 600;
}

.expertise__items p {
    font-family: "Noto Sans";
    font-size: 16px;
    font-weight: 400;
}

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
        crossorigin="anonymous">

<section class='expertise container-fluid '>
        <div class='row'>
            <div class='col-sm-8'>
                <div class='expertise__text row'>
                    <h1>OTHER EXPERTISE</h1>
                    <p class='expertise__text-p'>Proin iaculis purus consequat sem cure digni ssim. Donec porttitora
                        entum suscipit aenean
                        rhoncus posuere odio in tincidunt consequat sem cure digni ssim. </p>
                    <div class='col-sm-6 expertise__items row'>
                        <div class='col-sm-1'>
                            <img src="/img/gear.png" alt="">
                        </div>
                        <div class='col-sm-11'>
                            <h2>CUSTOM HELP</h2>
                            <p>Proin iaculis purus consequat sem cure digni ssim. Donec porttitora entum suscipit
                                aenean
                                rhoncus.</p>
                        </div>

                        <div class='col-sm-1'>
                            <img src="/img/gear.png" alt="">

                        </div>
                        <div class='col-sm-11 '>
                            <h2>ALL STAR SUPPORT TEAM</h2>
                            <p>Proin iaculis purus consequat sem cure digni ssim. Donec porttitora entum suscipit
                                aenean
                                rhoncus.</p>
                        </div>

                    </div>
                    <div class='col-sm-6 expertise__items row '>
                        <div class='col-sm-1'>
                            <img src="/img/gear.png" alt="">

                        </div>
                        <div class='col-sm-11 '>
                            <h2>CLOUD CONTROL</h2>
                            <p>Proin iaculis purus consequat sem cure digni ssim. Donec porttitora entum suscipit
                                aenean
                                rhoncus.</p>
                        </div>

                        <div class='col-sm-1'>
                            <img src="/img/gear.png" alt="">

                        </div>
                        <div class='col-sm-11'>
                            <h2>TOP NOTCH SECURITY</h2>
                            <p>Proin iaculis purus consequat sem cure digni ssim. Donec porttitora entum suscipit
                                aenean
                                rhoncus.</p>
                        </div>
                    </div>
                </div>

            </div>
            <div class='col-sm-4 expertise__img '>
                <img src="https://i.imgur.com/8mdzkbV.png" alt=""></div>
        </div>
    </section>

它应该看起来如何：

太阳之光

您应该注意的是justify-content-center，align-items-center这将使您的 flex 项目在垂直和水平方向上居中对齐。另一方面，img-fluid用于图像。

如果您在 stackoverflow 中查看此示例，请在整页中查看并使用浏览器的开发工具来模拟智能手机的屏幕尺寸 :)

.bg-grey {
  background-color: #F7F7F7;
}

p {
    font-family: "Noto Sans";
    font-size: 16px;
    font-weight: 400;
}

h1 {
    color: #222222;
    font-family: Montserrat;
    font-size: 40px;
    font-weight: 700;
}

h5 {
    color: #222222;
    font-family: Montserrat;
    font-size: 22px;
    font-weight: 600;
}

.round-button {
  border-radius: 75px !important;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>


<div class="container-fluid">
  <div class="row justify-content-center align-items-center">
    <div class="col-sm-6">
      <h1 class="font-weight-bold mb-3">OTHER EXPERTISE</h1>
      <p class="mb-5">Aenean pharetra magna ac placerat vestibulum. Faucibus interdum posuere lorem ipsum dolor sit. Quis vel eros donec ac. Nisi quis eleifend quam adipiscing vitae proin sagittis.</p>
      <div class="row align-items-center">
        <div class="col-sm-6">
          <h5>SOME HEADER</h5>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
        <div class="col-sm-6">
          <h5>SOME HEADER</h5>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
        <div class="w-100 h-100"></div>
        <div class="col-sm-6">
          <h5>SOME HEADER</h5>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
        <div class="col-sm-6">
          <h5>SOME HEADER</h5>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
      </div>
      <div class="row align-items-center mt-3 mb-3">
        <div class="col-sm-4">
          <input type="button" value="LEARN MORE" class="form-control round-button">
        </div>
      </div>
    </div>
    <div class="col-sm-4 text-center">
      <img src="https://i.imgur.com/8mdzkbV.png" class="img-fluid" alt=""></div>
  </div>
</div>

另外，这是一个工作示例:)

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。