title: Is there a way to make nextjs Image have fixed height and responsive width?
body: <p>I want to render an image with a fixed height and have its width be responsive. With a normal image you just set the height and it will respond</p>
  <pre><code>&lt;img src={image} style={{height: 48}} /&gt;
  </code></pre>
  <p>I was having trouble achieving this with nextjs Image component. I tried some solutions such as these:</p>
  <pre><code>&lt;div&gt;
    &lt;Image
      src={image}
      layout=&quot;responsive&quot; - only has responsive height
      height={48}
      width={48}
    /&gt;
  &lt;/div&gt;
  
  &lt;div style={{position: &quot;relative&quot;}}&gt; - wasnt responsive and its position was unpredictable
    &lt;Image
      src={image}
      layout=&quot;fill&quot;
      objectFit=&quot;contain&quot;
      height={48}
    /&gt;
  &lt;/div&gt;
  </code></pre>
  <p>Another solution that seemed promising was this but it does not fill the width.</p>
  <pre><code>.company_logo {
    position: relative !important;
    object-fit: contain;
    width: unset !important;
    height: 48px;
  }
  
  .company_image {
    width: 100% !important;
  }
  .company_image div {
    position: unset !important;
  }
  
  &lt;Image
    className={styles.company_image}
    src={image}
    alt=&quot;&quot;
    layout=&quot;fill&quot;
    quality={100}
    priority
  /&gt;
  </code></pre>
  <p>I'm playing around with a solution using js where I use an image and a ref with 0 opacity, get the dimensions of the image then set to a basic image with dynamic height and width, which should work fine but I'm assuming there is a much simpler solution to this</p>
  <pre><code>const imageRef = useRef(),
        [imageDimensions, setImageDimensions] = useState({ height: 0, width: 0 })
  
  useEffect(() =&gt; {
    let height = imageRef.current?.naturalHeight,
        width = imageRef.current?.naturalWidth
  
    setImageDimensions({ height, width })
  }, [])
  
  &lt;img ref={imageRef} src={image} style={{opacity: 0}} /&gt;
  
  &lt;Image
    src={image}
    height={imageDimensions.height}
    width={imageDimensions.width}
    quality={100}
    priority
  /&gt;
  </code></pre>