CODEWITHSUNDEEP
htmlcsswordpressimageresponsive
WiscoRadio
WiscoRadio

Reputation: 174

Responsive image not filling DIV when shrinking viewport

I have a 2 column layout in which one column contains an image and the other column contains space for text, buttons etc.

Problem

The problem that I am having is with the image column specifically. When the image column is scaled at larger viewports, it works great and scales exactly as planned. Both the columns adjust at the same height and all items scale properly. However, as the window gets smaller, the image keeps getting smaller as well. The two columns are no longer even and the background of the image column begins to show. I think this is happening because the image is trying to keep the same aspect ratio.

Intention

The intention is that as the viewport scales down, The respective columns also scale down while keeping their same width ratio and the height of the two columns should always match.

Tried / Failed Solutions

Here is a code snippet and a JSFiddle http://jsfiddle.net/CztS6/37/

.flex-container {
    width: 100%;
    min-height: 300px;
    margin: 0 auto;
    display: flex;
}
.full-width-four {
    width: calc(33.3333333333%);
    float: left;
    margin-left: 0;
    background: #dbdfe5;
    flex: 1;
}
.recruitment{
  display: block;
  height: auto;
  max-width: 100%;
  object-fit: cover;
  
}
.full-width-eight{
    width: calc(66.6666666667%);
    float: left;
    margin-left: 0;
    background: #b4bac0;
    flex: 2;
}
<div class="flex-container">
  <div class="full-width-four">
    <img class="recruitment" src="http://via.placeholder.com/570x415"> 
  </div>
  <div class="full-width-eight">Column 2</div>
</div>

Upvotes: 1

Views: 266

Answers (1)

Gautam Naik
Gautam Naik

Reputation: 9358

Here is my solution, Is this what your are looking for?

I commented min-height: 300px; for flex-container

I also added width:100%; to the image

.flex-container {
    width: 100%;
    /* min-height: 300px; */
    margin: 0 auto;
    display: flex;
}
.full-width-four {
    width: calc(33.3333333333%);
    float: left;
    margin-left: 0;
    background: #dbdfe5;
    flex: 1;
}
.recruitment{
  display: block;
  height: auto;
  max-width: 100%;
  object-fit: cover;
  width:100%;
  
}
.full-width-eight{
    width: calc(66.6666666667%);
    float: left;
    margin-left: 0;
    background: #b4bac0;
    flex: 2;
}
<div class="flex-container">
  <div class="full-width-four">
    <img class="recruitment" src="http://via.placeholder.com/570x415"> 
  </div>
  <div class="full-width-eight">Column 2</div>
</div>

Upvotes: 1

Related Questions