如何在引導程序中制作垂直和水平對齊的響應式圖像

Question

作為練習的一部分，我正在將 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>

它應該看起來如何：

Answer 1

您應該注意的是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>

另外，這是一個工作示例:)