javascript - Maintain responsive image height

Question

I am attempting to create a CTA component at the top of my react application, that contains the navbar and the CTA text. After successfully completing the component, I am noticing a minor bug that I would like to resolve. I am only providing my image with a width of 100% and no defined height. This causes the divs beneath the image to flicker upwards until the image has fully loaded. I know not providing the image with a defined height is causing it because the bug goes away when I provide the image with a random height. I am wondering if there is a way to provide the image with a responsive height that would behave in a similar way to just providing my image with 100% width.

my css code is as follows:

body {
  margin: 0;
  padding: 0;
}

.container {
  position: relative;
}
.container .container-background {
  opacity: 0.25;
}

.container-background-img {
  width: 100%;
  position: relative;
}

.container .content {
  position: relative;
  z-index: 1;
}

.app-outer {
  max-width: 1170px;
  margin: 0 auto;
  position: relative;
  padding: 0rem 1rem;
}



@media only screen and (max-width: 1170px) {
  .container-background-img {
    height: 656px;
    object-fit: cover;
  }
}

@media only screen and (max-width: 768px) {
  .container-background-img {
    height: 653px;
    object-fit: cover;
  }
}

/* CODE ADDED */
#navbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

#content {
  position: absolute;
  top: 20%;
}

my jsx code is as follows:

import React from "react";
import "./styles.css";

export default function App() {
  return (
    <>
      <div className="container">
        <div className="container-background">
          <img
            id="rob"
            src="https://i.imgur.com/iyFtMNA.jpg"
            alt="bg"
            className="container-background-img"
          />
        </div>
        <div id="content" className="content">
          I am the CTA
        </div>
        <div id="navbar">
          <div
            style={{
              backgroundColor: "white",
              height: 100,
              width: "100%",
              display: "flex",
              justifyContent: "center",
              alignItems: "center"
            }}
          >
            I am the navbar
          </div>
        </div>
      </div>
      <div>I am beneath the cta</div>
    </>
  );
}

the following link I have provided contains a code sandbox: https://codesandbox.io/s/issue-react-forked-4lsdm?file=/src/App.js:0-868

Please Note: *** within the code sandbox the issue is not very apparent, but within my react application it is much more noticeable

question from:https://stackoverflow.com/questions/65850429/maintain-responsive-image-height

Answer 1

As you mentioned, the issue is not really clear to see from your sandbox code.

I am not sure this would fix your issue but instead of using image tag try setting your CTA component to have background-image() instead.

Make sure to add other background css attributes too such as

background-repeat: no-repeat;
background-size: cover;
background-posistion: center;
padding-bottom: 60%;

Make sure to add padding-bottom: 60% (Your image seems to have a 3:2(w:h) ratio);

Hopefully, this works for you!