Product landing page - responsive resizing image within flexbox

HTML-CSS
#1

Hi everyone! I’ve been working on a basic redesign of the Soylent homepage from scratch for my product landing page project, and I’ve been running into a slight problem responsively resizing an image within a flexbox.

Basically, I have a “highlight” section which has large text on a colored background on the left side, and an image on the right. The text and image are separate divs within the flexbox.

The image looks great in full-window size on my laptop. However, whenever I decrease window size the image becomes “smushed,” basically losing its aspect ratio and becoming thin/distorted.

I understand maintaining the aspect ratio of the image will likely result in some blank space around it, as it wouldn’t fit the container anymore without stretching, but I don’t want this. Should I instead make the height of the flexbox depend on the size of the image, and how? I don’t care if the text section is resized accordingly.

Here’s the Codepen link: https://codepen.io/kleekie/full/dyMEEJm.
And here’s the relevant code:

<html>
<div class="highlight">
 <div class="highlight-text">
   <h1>Soy Protein: Good for You, Good for the Planet.</h1>
   <button id="shop-now" onclick="#">Shop Now -></button>
 </div>
 <div class="highlight-img">
 <img src="https://cdn.shopify.com/s/files/1/0003/5933/3902/files/img_3x_781bb7fa-5d0a-48da-a750-d3d9bebf8a2b_1200x.png?v=1587060911">
 </div>
</div>
</html>

<style>
.highlight {
 margin-top: 70px;
 display: flex;
 flex-direction: row;
 justify-content: center;
 height: 550px;
}

.highlight-text {
 background: LightGray;
 font-size: 30px;
 text-align: left;
 padding: 75px 20px 20px 90px;
}

.highlight-img {
 width: 100%;
}

.highlight-img img {
width: 100%;
 height: 100%;
}
</style>

**Your browser information:**

User Agent is: <code>Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.121 Safari/537.36</code>.

**Challenge:** Build a Product Landing Page

**Link to the challenge:**
https://www.freecodecamp.org/learn/responsive-web-design/responsive-web-design-projects/build-a-product-landing-page
#2

You can use object-fit: cover on the image.

I would assume that you are to going make changes to the section at some screen width, like stacking it, changing the font size, etc. because otherwise the text content will just overflow the container and you can’t just keep the fixed height on the container and keep it like it is now for small screen sizes.

Here is an example with flex-wrap: wrap

.highlight {
  margin-top: 70px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  min-height: 550px;
  flex-wrap: wrap;
}

.highlight-text {
  background: LightGray;
  font-size: 30px;
  text-align: left;
  padding: 75px 20px 20px 90px;
  flex: 1 1 350px;
}

.highlight-img {
  flex: 1 1 350px;
}

.highlight-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* maybe object-position to keep the product in frame */
  /* object-position: left; */
}
#3

That worked great, thank you so much! Yes, I hadn’t gone ahead to account for small screen sizes yet (my last requirement is using a media query) but your solution resizes perfectly.

#4