fluid images with max-height instead of max-width

Question

fluid images with max-height instead of max-width

3.5k views Asked by gasmoor At 20 October 2014 at 11:23

So the classic way of doing fluid images is with the max-width/height combo on the img css.

img { max-width:100%; height: auto;}

however I am in a situtation where I actually want the image to resize based on the containter's height limitation and not its width. I thought that a simple swap of properties would do the trick, but apparently it is not that simple. Check the fiddle bellow. If I set the container (wrap)'s width to a fixed pixel dimension, the image works as it should. However, if I change the img css to

img { max-height:100%; width: auto;}

and force a pixel height, nothing really happens.

jsfiddle: see updates bellow

Just to give you a little more insight of what I am trying to achieve. I will have a number of full-window containers one on top of each other. Each container should take the whole window space. This is why I need the image to flex its dimensions depending on the container height (I am aware I may have to resort to jquery to force the container's height).

thanks for any insight

update!

I have created two fiddles to better illustrate my ultimate goal.

I want to be able to stack containers that are each as tall as the whole window. Scaling the image up or down fluidly to help achieve this.

fiddle1: wrapper element is set to 100% width+height. if width is reduced, the image fluidly resizes.

http://jsfiddle.net/1geyww63/

fiddle2: wrapper element is set to a given pixel height. I would expect/imagine/cross my fingers that image would resize fluidly too fitting in all the content and the container's set height be respected. This however does not happen.

http://jsfiddle.net/1geyww63/4/

I hope I have made myself more understandable. I didn't want to throw too much information there. My main question remains how to make images resize fluidly with a height "centric" approach as opposed to the width.

enter image description here

Original Q&A

There are 2 answers

**Aleš Lulák** · Answer 1 · 2014-10-20T11:45:22+00:00

Aleš Lulák On 20 October 2014 at 11:45

I guess you can use positions.

You have to set wrapper for relative and img for absolute position:

http://goo.gl/n5CkRx simple example

**abir_maiti** · Answer 2 · 2014-10-20T11:59:46+00:00

Please check this Fiddle http://jsfiddle.net/q24j47tt/2/. If this is what you want. Your question lacks some information. If you please elaborate the problem then we might be able to find the solution.

HTML

<body>
<div class="wrapper">
    <div class="main">
        <div class="content">
            <div class="hcenter">
                <img src="http://lorempixel.com/640/480/people" alt="">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus voluptas obcaecati consequuntur asperiores debitis. Corporis, dignissimos qui! Consequuntur ad, modi ex pariatur cupiditate optio recusandae dolores aperiam laudantium itaque aspernatur.
                    <br>More Lorem
                    <br>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus voluptas obcaecati consequuntur asperiores debitis. Corporis, dignissimos qui! Consequuntur ad, modi ex pariatur cupiditate optio recusandae dolores aperiam laudantium itaque aspernatur.</p>
            </div>
        </div>
    </div>
    <div class="footer">footer content</div>
</div>

CSS

html, body {
            margin: 0;
            height: 100%;
        }
        img {
            /* img width responds to wrapper width*/
            max-width: 100%;
            height: 100%;

        }
        .wrapper {
            display: block;
            position: relative;
            height: 100%;
            width: 100%;
            background-color: yellow;
        }
        .main{
            display: block;
            height: 100%;
            position: relative;

        }
        .footer {
            display: table-row;
        }
        .footer {
            background-color: #333;
            color: #fff;
            height: 3em;
        }
        .main .content {
            vertical-align: middle;
            display: block;
            position: relative;
            height: 100%;
        }
        .hcenter {
            max-width: 600px;
            margin: 0 auto;
            display: block;
            position: relative;
            height: 100%;
        }

TechQA.

fluid images with max-height instead of max-width

update!

There are 2 answers

Related Questions in HTML

Related Questions in CSS

Related Questions in FLUID-LAYOUT

Related Questions in FLUID-IMAGES

Popular Questions

Popular Tags

Trending Questions