Make the height of a background image related to another div height-CodePudding

I am curious if there is an easy way to make the height of the image in the right div to be equal to the height of the left div, which can have different height values. I managed to achieve this by using JavaScript, but I was wondering if it can be done purely based on CSS.

The idea behind this was to make the image centered and just show as much of the height and the width of the div as possible without resizing the image. However, as I am posting this it didn't work quite as expected.

    background-position: center;
    background-repeat: no-repeat;
    background-size: center;

#body{
  position:absolute;
  top:0;
  left:0;
  width:100vw;
  height:100vh;
  background-color:blue;
}

#main{
    display: flex;
    position: relative;
    top: 50%;
    left: 50%;
    width: 90vw;
    transform: translate(-50%, -50%);
    background-color:#fff;
}

#left{
    position:relative;
    width:50%;
    background-color:yellow;
 }
 
 #right{
    position:relative;
    width:50%;
    background-color:pink
 }
 
    #right img{
        width: 10%; /* had to add that just to make it look presentable */
        background-position: center;
        background-repeat: no-repeat;
        background-size: center;
    }
    
    
#author{
  position: absolute;
  width:100vw;
  left:0;
  bottom:0;
  color:#fff;
  text-align:center;
}

#author a{
    color:#fff;
}

<div id="body">
  <div id="main">
      <div id="left">
          We do not know the exact height of the div, but we want the image to be the exact size like this div.
      </div>
      <div id="right">
          <img src="https://images.unsplash.com/photo-1494961104209-3c223057bd26?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2302&q=80" alt="containers">
      </div>
  </div>
</div>



<div id="author">Photo by <a href="https://unsplash.com/@guibolduc?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Guillaume Bolduc</a> on <a href="https://unsplash.com/s/photos/containers?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a></div>

CodePudding user response：

Without needing to use background images, we can use

object-fit: cover to ensure that the image is stretched while retaining aspect ratio

See proof-of-concept below, using object-fit: contain:

#body{
  position:absolute;
  top:0;
  left:0;
  width:100vw;
  height:100vh;
  background-color:blue;
}

#main{
    display: flex;
    position: relative;
    top: 50%;
    left: 50%;
    width: 90vw;
    transform: translate(-50%, -50%);
    background-color:#fff;
}

#left{
    position:relative;
    width:50%;
    background-color:yellow;
 }
 
 #right{
    position:relative;
    width:50%;
    background-color:pink
 }
 
    #right img{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
    
    
#author{
  position: absolute;
  width:100vw;
  left:0;
  bottom:0;
  color:#fff;
  text-align:center;
}

#author a{
    color:#fff;
}

<div id="body">
  <div id="main">
      <div id="left">
          We do not know the exact height of the div, but we want the image to be the exact size like this div.
      </div>
      <div id="right">
          <img src="https://images.unsplash.com/photo-1494961104209-3c223057bd26?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2302&q=80" alt="containers">
      </div>
  </div>
</div>



<div id="author">Photo by <a href="https://unsplash.com/@guibolduc?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Guillaume Bolduc</a> on <a href="https://unsplash.com/s/photos/containers?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a></div>

CodePudding user response：

can you use a background image? add this css to #right


background-image: url(https://images.unsplash.com/photo-1494961104209-3c223057bd26?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2302&q=80);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}

CodePudding user response：

See the snippet below. Instead of using an img element inside, you can use a background-image by CSS. To avoid hard-coding image path, you could use an inline CSS custom property to use multiple different images as needed.

NOTE:

background-size: contain; makes the image best fit the container without cropping anything out.
background-position: center; and background-repeat: no-repeat; ensure that image appears at the center without creating a repeat pattern.

style="--bg: url(....)" portion is what makes it repeatable, as it's picked up in the CSS.

#body {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: blue;
}

#main {
  display: flex;
  position: relative;
  top: 50%;
  left: 50%;
  width: 90vw;
  transform: translate(-50%, -50%);
  background-color: #fff;
}

#left {
  position: relative;
  width: 50%;
  background-color: yellow;
}

#right {
  position: relative;
  width: 50%;
  background-color: pink;
  background-image: var(--bg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;

}

#author {
  position: absolute;
  width: 100vw;
  left: 0;
  bottom: 0;
  color: #fff;
  text-align: center;
}

#author a {
  color: #fff;
}

<div id="body">
  <div id="main">
    <div id="left">
      We do not know the exact height of the div, but we want the image to be the exact size like this div.
    </div>
    <div id="right" style="--bg: url(https://images.unsplash.com/photo-1494961104209-3c223057bd26?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2302&q=80)">
    </div>
  </div>
</div>



<div id="author">Photo by <a href="https://unsplash.com/@guibolduc?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Guillaume Bolduc</a> on <a href="https://unsplash.com/s/photos/containers?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a></div>