Как сделать вертикальное и горизонтальное выравнивание адаптивного изображения в начальной загрузке

Question

Я делаю PSD на HTML-сайт в рамках упражнений.Как сделать отзывчивым, выровнять горизонтальное и вертикальное центральное изображение с помощью начальной загрузки?У меня есть проблемы, когда экран уменьшается, он выходит за пределы экрана, изображение не хочет быть отзывчивым, даже когда я добавляю img-отзывчивый класс к нему.Я попробовал с 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, которые выровняют по центру ваши гибкие элементы как по вертикали, так и по горизонтали.С другой стороны, используйте 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>

Также вот рабочий пример :)