Images need to be set by using columns without using height and width

Question

I am working on a task, I have to use bootstrap columns and to set images without using custom height and width. it should be set (height: 100%, width: 100% )only, I don't want to use flex it should be column-based. I am stuck on images height. please someone who can point me in the right direction. Thanks In Advance.

Expected Output: Achieve code: codepen link

.image-box-wrap { 
  position: relative;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto; 
  padding: 80px 0;
}
.image-box { position: relative; }
.empty-space { margin-top: 20px; }
.img-box {
  width: 100%;
  object-fit: cover;
  display: block;
}

.image-box { position: relative; }
.left-image {height: fit-content}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="image-box-wrap">
  <div class="image-box">
    <div class="row">
      <div class="col-lg-4 col-md-4 col-sm-4">
        <div class ="box-img">
            <img src="https://i.ibb.co/8MGNWpM/photo-1586500036065-bdaeac7a4feb.jpg" class="img-box left-image"/>
        </div>
      </div>
      <div class="col-lg-8 col-md-8 col-sm-8">
        <div class="row">
              <div class="col-lg-6 col-md-6 col-sm-6">
                 <div class ="box-img">
                    <img src="https://i.ibb.co/dLv97wf/bangle-2156210-1920.jpg" class="img-box"/>
                </div>
            </div>
            <div class="col-lg-6 col-md-6 col-sm-6">
                <div class ="box-img">
                    <img src="https://i.ibb.co/dLv97wf/bangle-2156210-1920.jpg" class="img-box"/>
                </div>
            </div>
        </div>      
          <div class="row empty-space">
            <div class="col-lg-12 col-md-12 col-sm-12">
                <div class ="box-img">
                    <img src="https://i.ibb.co/Y0ZRx7B/photo-1498753427761-548428edfa67.jpg" class="img-box"/>
              </div>
            </div>
        </div>
    </div><!-- main row Ends Here-->
  </div><!-- image-box Ends Here-->
</div><!-- image-box-wrap Ends Here-->

@Mr. Perfectionist: Thanks for your response but if I add that what is the use then because can't use max-height, max-width to set that images — Asiya Fatima, Apr 18 '20 at 14:18
@Mr. Perfectionist: thanks for your valuable time please can you update the code and show how it will achieve — Asiya Fatima, Apr 18 '20 at 14:19
@Mr. Perfectionist: I add an img-responsive class in my code but there is no result — Asiya Fatima, Apr 18 '20 at 14:24
please is there anyone who can solve these I am stuck since the whole day I am trying to get but unable to get. — Asiya Fatima, Apr 18 '20 at 14:27
I don't understand why not flexbox, here take a look https://jsfiddle.net/5h0bscay/1/ the images respond to changes in width and height of the container — Rainbow, Apr 18 '20 at 14:32
@Zohir Salak: thanks for your efforts but I need to complete this task by using columns — Asiya Fatima, Apr 18 '20 at 14:36
@ Mr. Perfectionist: No, by using css only i am trying to get that — Asiya Fatima, Apr 18 '20 at 14:49
It is not possible to do using just Column % height. How will an object detect the 100% height? If the height is 100px then he can understand it is 100px...... Try to use flex or javascript to do that. Otherwise not possible in this way. :-) — Mr. Perfectionist, Apr 18 '20 at 14:51
@Mr. Perfectionist :ok then, can you please share your knowledge to solve this by using javascript because almost I waste my day:( — Asiya Fatima, Apr 18 '20 at 14:53
Oh Yes...... But what I will get?!! You are getting money from client, but I will not get any upvote!!! — Mr. Perfectionist, Apr 18 '20 at 15:20
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/211966/discussion-between-mr-perfectionist-and-asiya-fatima). — Mr. Perfectionist, Apr 18 '20 at 18:15
This answer helped me in my professional life. So, thanks for the Question. — Mr. Perfectionist, Jun 10 '20 at 03:33
@Mr. Perfectionist: Really, glad to hear to it helps you thanks for the compliment to my question :) — Asiya Fatima, Jun 10 '20 at 09:24

Images need to be set by using columns without using height and width

0 Answers0