CSS: Image scale with width

Question

I have a div with an image background (in React with Next.js, but that shouldn't matter).

import styles from './my-component.module.css';
import Background from '../../../public/assets/images/background-image.png';

// later

<div
  style={{ backgroundImage: `url(${Background})` }}
  className={`${styles['background-image']}`}
>

Here is the CSS I'm currently using:

.background-image {
  border-radius: 8px;
  background-size: cover;
  background-repeat: no-repeat;
  height: auto;
}

I can't get the image to take the full height. It should always take the display's width, but take as much height as it can without stretching or repeating. How can I do that?

Update: Yes, the container has more height than the element.

Update 2 Viira's solution almost works, but the image doesn't respect padding on the right side.

Answer 1

Here is how I ended up solving it:

import PropTypes from 'prop-types';
import React from 'react';

import styles from './background-image-card.module.css';

function BackgroundImageCard({ alt, children, className, image }) {
  return (
    <div className={`${className} ${styles.container}`}>
      <div className={styles.overlay} />
      <img alt={alt} src={image} className={styles['background-image']} />
      <div className={styles.content}>{children}</div>
    </div>
  );
}

BackgroundImageCard.propTypes = {
  alt: PropTypes.string,
  children: PropTypes.node,
  className: PropTypes.string,
  image: PropTypes.string,
};

export default BackgroundImageCard;

.container {
    align-items: center;
    display: flex;
    justify-content: center;
    position: relative;
    width: 100%;
}

.overlay {
    background: var(--gray-800);
    border-radius: 8px;
    height: 100%;
    opacity: 0.8;
    position: absolute;
    width: 100%;
}

.background-image {
    border-radius: 8px;
    height: auto;
    width: 100%;
    z-index: -1;
}

.content {
    position: absolute;
}

Answer 2

Maybe this can help.

Don't set it in background image try insert it in img tag

*{box-sizing: border-box;}
body {
  margin: 0;
}
.background-image {
  
  border-radius: 8px;
  background-size: cover;
  background-repeat: no-repeat;
  height: auto;
}

.container {
  display: table;
  width: 100%;
}

.img {
  display: table-cell;
  width: 100%;
  position: absolute;
  z-index: -1;
}
 
.img img {
  width: 100%;
}

.text {
  display: table-cell;
  padding: 30px;
  width: 100%;
}

<div class="background-image">
  <div class="container">
    <div class="img">
      <img src="https://image.shutterstock.com/image-photo/beautiful-water-drop-on-dandelion-260nw-789676552.jpg">
      </div>
    <div class="text">
  <h1>Are you ready</h1>
  <p>Click the link</p>
  <button>Click Here</button>
    </div>
    </div>
</div>

NOTE: The image is stretched to full width because its resolution is low. you can set it's width to auto to display its original size.

Solution 2:

As the OP mentioned, padding is not respected by the image. I came up with a solution. Since the .container div is in display: table; padding isn't allowed there. So, by giving the padding to its parent .background-image this issue will be lifted.

*{box-sizing: border-box;}
body {
  margin: 0;
}
.background-image {
  
  border-radius: 8px;
  padding: 15px 40px;
}

.container {
  display: table;
  width: 100%;
  max-width: 100%;
  position: relative;
}

.img {
  display: table-cell;
  width: 100%;
  position: absolute;
  z-index: -1;
}
 
.img img {
  width: 100%;
}

.text {
  display: table-cell;
  padding: 30px;
  width: 100%;
}

<div class="background-image">
  <div class="container">
    <div class="img">
      <img src="https://image.shutterstock.com/image-photo/beautiful-water-drop-on-dandelion-260nw-789676552.jpg">
      </div>
    <div class="text">
  <h1>Are you ready</h1>
  <p>Click the link</p>
  <button>Click Here</button>
    </div>
    </div>
</div>

Set padding for .background-image div so that the padding will apply.

Answer 3

So you want your image to determine the height of your div. That is not possible when using the image as background.

You need to load image into dom as an element which can then be used to determine the height of your div, if you want to show some content on top of the image in this case, you will have to overlay it on top of the image.

Here's a sample html structure you can use to achieve this

<div style="position:relative">
  <img src="https://images.unsplash.com/photo-1573496528816-a104a722b3db?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80" style="width:100%; height: auto;" />
  <div style="position:absolute; top: 0; left: 0; width: 100%; height: 100%">
    // YOUR CONTENT
  </div>
</div>