Problems with Bootstrap grid

Asked

Viewed 56 times

3

I have this problem. I’m going to be very direct. Self-explanatory images.

I can decrease the source but I don’t know how much content will be in the block. So I want to make a working code. I researched something about Object-fit.

Expectancy: inserir a descrição da imagem aqui

Reality: inserir a descrição da imagem aqui

.container-fluid {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}
.row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}
.col-6 {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
}
.col-1 {
    -ms-flex: 0 0 8.333333%;
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
}
.col-4 {
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
}
#page {
    background: #1b6491;
    color: #fff;
}
<section id="page">
  <div class="container-fluid">
    <div class="row">
      <div class="col-6"><img class="img-fluid" src="https://picsum.photos/300/300" alt=""></div>
      <div class="col-1"></div>
      <div class="col-4">
        <h2>Lorem ipsum</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi iusto quam, dignissimos, totam recusandae repellendus iure cumque ab possimus esse eum nam architecto, dolorum consectetur ipsum laudantium distinctio. Maxime, dicta
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi iusto quam, dignissimos, totam recusandae repellendus iure cumque ab possimus esse eum nam architecto, dolorum consectetur ipsum laudantium distinctio. Maxime, dicta
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi iusto quam, dignissimos, totam recusandae repellendus iure cumque ab possimus esse eum nam architecto, dolorum consectetur ipsum laudantium distinctio. Maxime, dicta
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi iusto quam, dignissimos, totam recusandae repellendus iure cumque ab possimus esse eum nam architecto, dolorum consectetur ipsum laudantium distinctio. Maxime, dicta.</p>
      </div>
      <div class="col-1"></div>
    </div>
  </div>
</section>

html css
  • 1

    you want the image to be filled across the div?

  • I don’t quite understand what you want?

  • That, that the image follows the height of the div. You can even zoom in, like that background formatting(cover center).

  • That seems to have worked here, but in my code I believe you’re pulling something else as well. Because the image was inside the box, but she took 100% of my screen.

  • Cara gave an edited one in my reply. Now the img occupies 100% of the container width, but does not distort the height ever.

2 answers

3


You can use object-fit yes quietly. Just put the width and height image with 100%, you can still use the object-position to control the alignment of what is rendered on img. Just keep in mind that object-fit does not work in IE https://caniuse.com/#feat=Object-fit

In addition it is necessary to put overflow:hidden in col-, for this I created the class .col-img as you can see in CSS. I also used a position technique to make the image always occupy the entire width, but without distorting in height.

See the example to better understand. I put a section with more and other with less content for you to see the operation...

.container-fluid {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
  }
  .row {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
  }
  .col-6 {
  -ms-flex: 0 0 50%;
  flex: 0 0 50%;
  max-width: 50%;
  }
  .col-1 {
  -ms-flex: 0 0 8.333333%;
  flex: 0 0 8.333333%;
  max-width: 8.333333%;
  }
  .col-4 {
  -ms-flex: 0 0 33.333333%;
  flex: 0 0 33.333333%;
  max-width: 33.333333%;
  }
  #page, #page2 {
  background: #1b6491;
  color: #fff;
  }
  .col-img {
overflow: hidden;
position: relative;
  }
  .col-img img {
width: 100%;
height: 100%;
vertical-align: top;
object-fit: cover;
position: absolute;
object-position: center center;
  }
<section id="page">
  <div class="container-fluid">
    <div class="row">
      <div class="col-6 col-img"><img class="img-fluid" src="https://picsum.photos/300/300" alt=""></div>
      <div class="col-1"></div>
      <div class="col-4">
        <h2>Lorem ipsum</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi iusto quam, dignissimos, totam recusandae repellendus iure cumque ab possimus esse eum nam architecto, dolorum consectetur ipsum laudantium distinctio. Maxime, dicta
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi iusto quam, dignissimos, totam recusandae repellendus iure cumque ab possimus esse eum nam architecto, dolorum consectetur ipsum laudantium distinctio. Maxime, dicta
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi iusto quam, dignissimos, totam recusandae repellendus iure cumque ab possimus esse eum nam architecto, dolorum consectetur ipsum laudantium distinctio. Maxime, dicta
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi iusto quam, dignissimos, totam recusandae repellendus iure cumque ab possimus esse eum nam architecto, dolorum consectetur ipsum laudantium distinctio. Maxime, dicta.</p>
      </div>
      <div class="col-1"></div>
    </div>
  </div>
</section>
<section id="page2">
  <div class="container-fluid">
    <div class="row">
      <div class="col-6 col-img"><img class="img-fluid" src="https://picsum.photos/300/300" alt=""></div>
      <div class="col-1"></div>
      <div class="col-4">
        <h2>Lorem ipsum</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi iusto quam, dignissimos, totam recusandae repellendus iure cumque ab possimus esse eum nam architecto, dolorum consectetur ipsum laudantium distinctio. Maxime, dicta
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi iusto quam, dignissimos, totam recusandae repellendus iure cumque ab possimus esse eum nam architecto, dolorum consectetur ipsum laudantium distinctio. Maxime, dicta
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi iusto quam, dignissimos, totam recusandae repellendus iure cumque ab possimus esse eum nam architecto, dolorum consectetur ipsum laudantium distinctio. Maxime, dicta
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi iusto quam, dignissimos, totam recusandae repellendus iure cumque ab possimus esse eum nam architecto, dolorum consectetur ipsum laudantium distinctio. Maxime, dicta.</p>
        <h2>Lorem ipsum</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi iusto quam, dignissimos, totam recusandae repellendus iure cumque ab possimus esse eum nam architecto, dolorum consectetur ipsum laudantium distinctio. Maxime, dicta
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi iusto quam, dignissimos, totam recusandae repellendus iure cumque ab possimus esse eum nam architecto, dolorum consectetur ipsum laudantium distinctio. Maxime, dicta
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi iusto quam, dignissimos, totam recusandae repellendus iure cumque ab possimus esse eum nam architecto, dolorum consectetur ipsum laudantium distinctio. Maxime, dicta
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi iusto quam, dignissimos, totam recusandae repellendus iure cumque ab possimus esse eum nam architecto, dolorum consectetur ipsum laudantium distinctio. Maxime, dicta.</p>
      </div>
      <div class="col-1"></div>
    </div>
  </div>
</section>

0

You can do this by changing the height and the width from image to 100%, then it will track the size of the div in which it is inserted, see how it works in Codepen.

Only that way, if it’s a small image, it’ll be distorted.

Another solution is to determine <style> of your col-6 the following properties:

display: flex;
justify-content: center;
align-items: center;

With this the image accompanies the size of the text next to it, it will be centered on the div, will not be distorted, but will not fill the entire div, see how it works in Codepen.

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.