Full height image as the text

Question

i'm trying to make the image take the full height of the div as the text and keep it proportional with width as the overflow is hidden and image is centered,I used display flex and i don't want to use background-image in css because i have multiple images and articles . can anyone help?

div {
  border: 1px dotted red;
  display: block;
}

.article {
  display: -webkit-flex;
  display: flex;
  flex-direction: row;
  -webkit-flex-direction: row;
  width: 100%;
  overflow: auto;
  padding: 10px;
}

.article-content {
  height: 100%;
  width: 48.6666666%;
  text-align: left;
}

.image {
  margin-left: 3.5%;
  width: 48%;
  overflow: hidden;
}

.img-control {
  display: flex;
  justify-content: center;
  -webkit-justify-content: center;
  align-items: center;
  -webkit-align-items: center;
}

.img-control img {
  height: 100%;
}

<div class="article">
  <div class="article-content">
    <h3>What is Lorem Ipsum?</h3>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
      has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
      <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
      has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.
      </p>
  </div>
  <div class="image">
    <div class="img-control">
      <img src="http://via.placeholder.com/490x338" alt="" />
    </div>
  </div>
</div>

Answer 1

To get what you want I would first recommend using just 1 flex container instead of 2. This way both "content containers" (the text and the image) can be flex items in the same context and you can stretch them to match heights.

The updated HTML would then look like this:

<div class="article">
  <div class="article-content">
    <h3>What is Lorem Ipsum?</h3>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
      has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
      survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </p>
  </div>
  <div class="img-control">
    <img src="http://via.placeholder.com/490x338" alt="" />
  </div>
</div>

And the CSS would be:

.article {
  display: -webkit-flex;
  display: flex;
  flex-direction: row;
  -webkit-flex-direction: row;
  width: 100%;
  overflow: hidden;
  padding: 10px;
}

.article-content {
  height: 100%;
  width: 48.6666666%;
  text-align: left;
}

.img-control {
  margin-left: 3.5%;
  width: 48%;
  overflow: hidden;
  align-self: stretch;
}

On the .img-control flex item I added align-self: stretch; to stretch it to match the other flex item (the text in .article-content) and overflow: hidden; to hide the parts of the image that can overflow.

Then I just added a style to the image to make it center and take up 100% height of its stretched container:

.img-control img {
  height: 100%;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

You can see a demo here by resizing the frame window.

But there is a problem with this approach. When the text content is shorter than the image they don't match height and the image might not fill the width leaving gaps of white space. You can see this by looking at the above demo fiddle and stretching the frame window very wide.

To fix this I would recommend using a background-image along with background-size: cover; and background-position: center center;. Then you just simpley make a div and set the image source as an inline style.

Like this:

<div class="img-control">
    <div class="image" style="background-image: url(//via.placeholder.com/490x338);"></div>
  </div>

CSS:

.img-control .image {
  height: 100%;
  width: 100%;
  background-size: cover;
  background-position: center center;
}

Now see this improved demo fiddle and stretch the frame window to any size.