0

I have a dynamic-height container (its height is specified in relative measurements), inside of it, two elements - a header, and an img, e.g.:

<div class="item">
    <header><h1>Title</h1></header>
    <img ... />
</div>

I want the image to show in its entirety. Its css is set with height:100% .
Because of the height that the header takes, the image is clipped a little bit below (it is has an hidden overflown edge), where I want its height to auto adjust (become smaller) to fit inside the container.

There is a solution, where I use calc(100%-[height of header]) for the height of the image, but since calc is not supported in all browsers I was wondering if there is a different more supported solution for this.

Here is a jsfiddle:
http://jsfiddle.net/7xLo7mr6/

(Apply the class fix to the container to apply the calc fix)

Yuval A.
  • 5,849
  • 11
  • 51
  • 63
  • Is it no good unless there's a pure HTML/CSS solution? [A little bit of javascript](http://jsfiddle.net/amullins/bqvegjga/1) goes a long way. – Austin Mullins Mar 12 '15 at 21:44

2 Answers2

0

Perhaps CSS flex could be your solution for this one: http://jsfiddle.net/7xLo7mr6/9/

Using flex-direction: column; and applying a max-width to the container (allowing the image to fill in the rest of the height after the header text while not stretching the width) could potentially solve your issue, but might cause you more troubles depending on what you're ultimately after.

Another option: http://jsfiddle.net/7xLo7mr6/11/ apply height: 7%; to the header and height: 93%; to the image

Make the clipping happen at the top of the image instead of the bottom: http://jsfiddle.net/7xLo7mr6/13/

Apply position: absolute; to the header, give it a background: white; and width: 100%;, then apply a position: relative; to the container so that the header applies a width 100% to the container and not the body.

chdltest
  • 853
  • 2
  • 6
  • 18
0

If you just want the image to shrink when its container shrinks, you can give it a max-width of 100%, and that will stop your image from growing so large it exceeds its container.

.item img {
    height: 100%;
    max-width: 100%;
}

It might be important to note that declaring height: 100% does not make elements 100% of the height of their containers, it makes them 100% of their own intrinsic height. The heights of elements are determined by their content, not the other way around. Read a full explanation here: https://stackoverflow.com/a/5658062/4504641.

http://jsfiddle.net/ingridly/337wrgj8/1/

Community
  • 1
  • 1
ingridly
  • 159
  • 10
  • This does not cause the image's height to shrink. It still stays overflown and clipped... The purpose is to make sure the entire image will be shown in the container, within its dimensions... – Yuval A. Mar 12 '15 at 22:09
  • So you want the image dimensions to warp? – ingridly Mar 12 '15 at 22:15
  • No, the proportions should be kept, but the height should be the space between the header and the bottom of the container. See it with the ```fix``` class - it's exactly how I want it, I was just looking for another way other than using ```calc``` – Yuval A. Mar 13 '15 at 00:59