Scale background image to height of text column

Question

I have 2 columns on my web page. One for an image and one for text.

How can I force the image to be the exact same height as the text column?

Remember, to height of the text one could change depending on the content.

Here's my DEMO so far: http://jsfiddle.net/tkwk3bfr/

.img {
    background:url('http://placehold.it/100x100') 0 0 no-repeat;
    background-size:100%;
}

.text, .img {
    float:left;
    width:50%
}

<div>

<div class="img">&nbsp;</div>
    
<div class="text">
    <h1>hello there!</h1>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>

How do you want the image to scale? What should happen when the image is too wide and when the image is too tall? — sebnukem, Aug 26 '15 at 15:23

score 2 · Answer 1 · answered Aug 26 '15 at 15:24

For a pure CSS solution to this, I recommend using flexbox. No JS at all.

HTML

<div id="wrap">
    <div class="img"></div>

    <div class="text">
       <h1>hello there!</h1>
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat
    vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet
    quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat
    eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra.
    Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet,
    wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum
    rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in
    turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat.
    Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor,
    facilisis luctus, metus</p> 
</div><!-- .text --> 
</div><!-- #wrap -->

CSS

.img {
    background:url('http://placehold.it/100x100') 0 0 no-repeat;
    background-size:cover;
}

#wrap {
    display:flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-content: stretch;
    align-items: stretch;
}
.text, .img {
    flex-basis:50%;

}

Here's the fiddle: http://jsfiddle.net/disinfor/tkwk3bfr/1/

Plummer · Answer 2 · 2015-08-26T15:29:44.177

http://jsfiddle.net/tkwk3bfr/3/

HTML

<div class="parent">

    <div class="img">&nbsp;</div>

    <div class="text">
        <h1>hello there!</h1>
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
    </div>
</div>

CSS

.patent {
    display: table;
}
.img {
    background:url('http://placehold.it/100x100') 0 0 no-repeat;
    background-size: auto 100%;
}

.text, .img {
    display: table-cell;
    width: 50%;
}

No worries, just didn't want to give a downvote :) EDIT: And, with your edit, is a good solution as well. — disinfor, Aug 26 '15 at 15:32
@sebnukem: you can utilize different `background-size` values to accomplish what you need. http://stackoverflow.com/a/16548601/1202630 or https://css-tricks.com/almanac/properties/b/background-size/ It's also going to depend on whether or not you want to maintain image aspect ratio. Additionally, the question asks for height, not width. It absolutely maintains height of it's sibling container. If the whitespace is an issue, media breakpoints should be utilized to alter styling. — Plummer, Aug 26 '15 at 16:29

sebnukem · Accepted Answer · 2015-08-26T15:38:42.930

Apply the image to the container div using half its size, and display the text only in its right half.

http://jsfiddle.net/tkwk3bfr/2/

<div class="x">
  <div class="text">
    <h1>hello there!</h1>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
  </div>
</div>

CSS

.x {
  background:url('http://placehold.it/100x100') 0 0 no-repeat;
  background-size:50% 100%;
}
.text {
  padding-left:50%;
}

If you want to conserve the aspect ratio of the image, you can do:

background-size:50%;

score 0 · Answer 4 · answered Aug 26 '15 at 15:22

Best done with jQ or JS..

JQ:

 $(".img").height($(".text").outerHeight()+ "px");

.img {
    background:url('http://placehold.it/100x100');
    background-size: contain;
}

.text, .img {
    float:left;
    width:50%
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>

<div class="img">&nbsp;</div>
    
<div class="text">
    <h1>hello there!</h1>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>

No reason to use JS at all. This can be done with pure CSS. – disinfor Aug 26 '15 at 15:24 — disinfor, Aug 26 '15 at 15:24

Scale background image to height of text column

4 Answers4