Leave images together and responsive

Navigation
2

I need to let the images meet one underneath the other, occupying half of the container and next to the description of that image.

It needs to be in this format.

Currentlysheislikethis

Butthere,itoccupiesonlythedefinedsizecol-md-6,anditshouldoccupyabout60%oftheentirecontainer,fromsidetosideofthescreen,andthecontentitselfiscentralized,howeverthecontentwhenthescreendecreasesisgettingabovetheimage.

Myquestionishowtoputtheimagestogether,onetouchingtheotherinthelowerrightcornerofthefirstandthetopleftofthesecond

<divclass="container">
    <div class="col-md-12">
      <div class="row">
        <div class="col-md-6">
          <div class='img-container'>
            <img class="img-fluid" src="img/img-servico-1.jpg" alt="Estádio de futebol">
            <div class='triangle'></div>
          </div>
        </div>
        <div class="col-md-6 mt-5">
          <h4 class="text-left">Lorem..</h4>
          <h6 class="text-left mb-5">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Consectetur, veniam!
          </h6>
          <ul class="lista p-0 m-0">
            <li class="d-flex mb-2 align-items-center"><i class="fas fa-angle-right mt-1 mr-3" aria-hidden="true"></i>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis velit repellat repudiandae?
            </li>
            <li class="d-flex mb-2 align-items-center"><i class="fas fa-angle-right mt-1 mr-3" aria-hidden="true"></i>
              Lorem ipsum dolor sit, amet consectetur adipisicing elit. Architecto dolorem temporibus veritatis itaque. </li>
            <li class="d-flex mb-2 align-items-center"><i class="fas fa-angle-right mt-1 mr-3" aria-hidden="true"></i>
              Lorem ipsum dolor, sit amet consectetur adipisicing elit. Tempora, esse animi deserunt ullam distinctio alias.
            </li>
          </ul>
          <p class="pt-5"><a class="button button-rouded btn-big js-scroll" href="#sobre" role="button">Saiba Mais</a></p>
        </div>
      </div>
    </div>

    <div class="col-md-12">
      <div class="row">

        <div class="col-md-6 mt-5">
          <h4 class="text-right">Lorem ipsum dolor sit amet..</h4>
          <h6 class="text-right mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis?
          </h6>
          <ul class="lista p-0 m-0">
            <li class="d-flex text-right mb-2 align-items-center"></i>
             Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla voluptatem voluptatum ratione ut! Perspiciatis, eos aperiam atque neque at esse praesentium sit, doloribus dolor blanditiis a excepturi incidunt? Quis, quibusdam? <i class="fas fa-angle-left mt-1 ml-3"
                aria-hidden="true"></i>
            </li>
            <li class="d-flex text-right mb-2 align-items-center"></i>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis ab quis neque inventore quisquam placeat, suscipit error officia eveniet! Iste nam minus perferendis nihil ullam facere accusamus obcaecati porro delectus?
              <i class="fas fa-angle-left mt-1 ml-3" aria-hidden="true"></i></li>

          </ul>
          <p class="pt-4"><a class="button button-rouded btn-big js-scroll" href="#sobre" role="button">Saiba Mais</a></p>
        </div>

        <div class="col-md-6">
          <div class='img-container'>
            <img class="img-fluid" src="img/img-servico-2.jpg" alt="Estádio de futebol">
            <div class='triangle-left'></div>
          </div>
        </div>
      </div>
    </div>
  </div>

IMAGE CSS 

.img-container {
   width: 500px;
   height: 500px;
   overflow: hidden;
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative;
}

.img-container > img {
    height: 100%;
}
    
asked by anonymous 21.12.2018 / 16:42

1 answer

1

This is an option, it uses the image as background-image of div and not with the tag <img> , but if it is necessary to use the tag <img> it speaks to me, since it is possible to adapt with it, the problem is that it gets less crossbrowser , because it uses properties that are not supported in older browsers ...

This CSS that you are using does not look cool, it is not very responsive because it has fixed values. I also needed to make some adjustments to your HTML, since the way you mounted the Grid was not cool. Here's how I did it and take it as a basis ...

LookatthistemplateImade.InCSSIcreatedtwoclasses,onewitheachimage,andIplaceditrightinthedivcol-Displayin"All Page" to see the responsiveness.

OBS : I needed to make a @media screen and (max-width: 767px) to say that on screen below that the image div will have a height of 300px. I left commented on the code 

.bg1,
.bg2 {
  background-image: url(https://placecage.com/200/200);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.bg2 {
  background-image: url(https://fillmurray.com/200/200);
}

@media screen and (max-width: 767px)  {
  .bg1,
  .bg2 {
    height: 300px !important; /* altura mínama pra imagem quando a tela for menor que 575px*/
  }
}
<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />

<div class="container">
  <div class="row">
    <!-- imagem -->
    <div class="col-md-6 bg1"></div>

    <div class="col-md-6 mt-5">
      <h4 class="text-left">Lorem..</h4>
      <h6 class="text-left mb-5">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Consectetur, veniam!
      </h6>
      <ul class="lista p-0 m-0">
        <li class="d-flex mb-2 align-items-center"><i class="fas fa-angle-right mt-1 mr-3" aria-hidden="true"></i>Lorem
          ipsum dolor sit amet, consectetur adipisicing elit. Omnis velit repellat repudiandae?
        </li>
        <li class="d-flex mb-2 align-items-center"><i class="fas fa-angle-right mt-1 mr-3" aria-hidden="true"></i>
          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Architecto dolorem temporibus veritatis itaque.
        </li>
        <li class="d-flex mb-2 align-items-center"><i class="fas fa-angle-right mt-1 mr-3" aria-hidden="true"></i>
          Lorem ipsum dolor, sit amet consectetur adipisicing elit. Tempora, esse animi deserunt ullam distinctio
          alias.
        </li>
      </ul>
      <p class="pt-5"><a class="button button-rouded btn-big js-scroll" href="#sobre" role="button">Saiba Mais</a></p>
    </div>
  </div>

  <div class="row">
    <div class="col-md-6">
      <h4 class="text-right">Lorem ipsum dolor sit amet..</h4>
      <h6 class="text-right mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis?
      </h6>
      <ul class="lista p-0 m-0">
        <li class="d-flex text-right mb-2 align-items-center">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla voluptatem voluptatum ratione ut!
          Perspiciatis, eos aperiam atque neque at esse praesentium sit, doloribus dolor blanditiis a excepturi
          incidunt? Quis, quibusdam? <i class="fas fa-angle-left mt-1 ml-3" aria-hidden="true"></i>
        </li>
        <li class="d-flex text-right mb-2 align-items-center">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis ab quis neque inventore quisquam
          placeat, suscipit error officia eveniet! Iste nam minus perferendis nihil ullam facere accusamus
          obcaecati porro delectus?
          <i class="fas fa-angle-left mt-1 ml-3" aria-hidden="true"></i></li>
      </ul>
      <p class="pt-4"><a class="button button-rouded btn-big js-scroll" href="#sobre" role="button">Saiba Mais</a></p>
    </div>

    <!-- imagem -->
    <div class="col-md-6 bg2"></div>
  </div>
</div>
    
21.12.2018 / 17:19
How to see Git statistics with Bitbucket? eSocial: Invalid Signature .NET Framework