Grid problems in Bootstrap

Question

Grid problems in Bootstrap

Navigation

#1 by (3 votes)
#2 by (0 votes)

3

I have this problem. I'll be quite straightforward. Self explanatory images.

I can decrease the font but I do not know how much content will be in the block. So I want to make a functional code. I researched something about object-fit.

Expectation:

Reality:

.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

asked by anonymous 06.09.2018 / 18:28

2 answers

0

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

But in this way, if it is a small image, it will be distorted.

Another solution is to determine in% w /% of your% w /% of the following properties:

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

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

06.09.2018 / 19:05

What is a "definition list" and how are these DL, DT and DD tags used? How to validate a CPF using a function in R? [closed]

score 3 · Accepted Answer

You can use object-fit yes quietly. Just put width and height of the image with 100%, you can still use object-position to control the alignment of what is rendered in img . Just keep in mind that object-fit does not work in IE link

In addition, I need to put overflow:hidden in col- , so I created the .col-img class as you can see in CSS. Also I used a positioning technique to make the image always fill the full width, but without distorting at the time.

See the example to understand better. I put section with more and one 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>