CSS - image ignores max-height in fluid container - jsFiddle inside

Question

CSS - image ignores max-height in fluid container - jsFiddle inside

1.6k Views Asked by marius2k12 At 15 July 2012 at 09:18

I have an image inside of a container (see #slider-section in the jsFiddle) which has a fluid height and a fixed max-height.

I have set max-height and max-width on my image to 100% (see #slider-img).

The Problem: When the browser window gets beyond a certain width, the image ignores the max-width and max-height setting and just gets larger then its container.

You can see it if you open the jsFiddle and expand the width of the browser.

The goal is to get the image to never exceed the width and height of its container and keep its aspect ratio.

This could be achieved by giving the container (#slider-section) a fixed height. However this is not a possible solution for me since it needs to be a fluid height.

Does anyone have a solution?

Original Q&A

There are 1 best solutions below

**AdityaSaxena** · Answer 1 · 2012-07-15T11:46:23.887000

Is this what you need ? http://jsfiddle.net/vjqjv/10/

HTML:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> 
    <title>test</title>
</head>

<body>
    <section id="slider-section" class="clearfix">
        <div id="slider-img-container">
            <img id="slider-img" src="http://s1.directupload.net/images/120715/jy5nvhce.png" alt=""/></div>
        <div id="slider-div-remaining" class="slider-div">
            <div>
                <h1>empfang</h1>
                <p>Der Empfangsbereich - weil es für den ersten Eindruck keine zweite Chance gibt!</p>
            </div>
        </div>
    </section>
</body>
</html>

CSS:

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    border: 0 none;
    font: inherit;
    margin: 0;
    padding: 0;
    vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none outside none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
a
{
    text-decoration: none;
    color: black;
}
html, body 
{
    height: 100%; 
    width: 100%; 
    margin: 0; 
}
#slider-section
{
    height: 58.3658%;
}
#slider-img-container
{
    float: left;
    height: 100%;
    margin-right:5px;
}
#slider-img
{
    max-height: 100%;
    display: block;
    max-width:100%;
}

.clearfix::after {
clear: both;
}
.clearfix::before, .clearfix::after {
content: "";
display: table;
font-size: 0;
height: 0;
line-height: 0;
visibility: hidden;
}

CSS - image ignores max-height in fluid container - jsFiddle inside

There are 1 best solutions below

Related Questions in IMAGE

Related Questions in CSS

Trending Questions

Popular # Hahtags

Popular Questions