CSS最大高度/寬度100％溢出

Question

我在div中有圖像，並且有一些CSS可以將所有內容間隔開，但是我遇到了一個問題，即使我有主圖像溢出視口（圖像在窗口邊緣被切除）

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

當前，最大高度：100％填充高度，最大寬度：100％導致溢出（反之亦然，取決於尺寸）。 我想讓圖像填滿寬度或高度，以較小者為准

請參閱： http : //jsfiddle.net/P32r8/ http://jsfiddle.net/P32r8/7/

更新：圖片！ 當前正在做第一個，我希望它做第二個。

Answer 1

在你的css中你寫了

第三編輯現在呵呵

我重寫了一些零件，最值得注意的是取消了該position:fixed; 在nav http://jsfiddle.net/CRjf7/

Answer 2

更新

我必須重做大多數代碼，以使一切正常工作。

演示： http : //jsfiddle.net/P32r8/30/

的HTML：

<nav>
    <h1>H1</h1>
    <ul>
        <li><a href="#">Link</a>
        </li>
        <li><a href="#">Link</a>
        </li>
        <li><a href="#">Link</a>
        </li>
        <li><a href="#">Link</a>
        </li>
        <li><a href="#">Link</a>
        </li>
        <li><a href="#">Link</a>
        </li>
    </ul>
</nav>


<div id="content">
    <div id="imagesContainer">
        <img id="1" src="http://placekitten.com/g/5000/" />
        <img id="2" src="http://placekitten.com/g/5000/?hello" />
        <img id="3" src="http://placekitten.com/g/5000/" />
        <img id="4" src="http://placekitten.com/g/5000/" />
        <img id="5" src="http://placekitten.com/g/5000/" />
        <img id="6" src="http://placekitten.com/g/5000/" />
        <img id="7" src="http://placekitten.com/g/5000/" />
    </div>
    <div id="loader">
        <img src="" alt="" />
    </div>
</div>

CSS：

nav {
    position: fixed;
    width: 200px;
    margin-left: 25px;
    padding-left: 0;
    float: left;
    height: 99%;
    overflow-y: auto;
    border-right: solid;
}
nav ul {
    margin-top: -50px;
    padding: 0;
    list-style-type: none;
    font-family: Helvetica, Arial, sans-serif;
    font-size: medium;
}
nav li#current a {
    font-weight: bold !important;
    margin-left: 50px;
    width: 150px !important;
}
nav li#current a {
    background-color: #EEE;
}
nav li#home a {
    float: none;
}
nav a {
    display: block;
    background-color: #BBB;
    width: 200px;
    padding: 1em 0 1em 0;
    margin-bottom: .5em;
    text-align: center;
    text-decoration: none;
    color: #000;
}
nav a:hover {
    background-color: #CCC;
}
h1 {
    font-size: 6em;
    color: rgb(0, 0, 0);
    margin-top: -0px;
}

#content {
    margin-left: 230px;
    overflow:hidden;
    max-width:960px;
    width:55%;
    float:left;
    border:1px solid red;
}
#imagesContainer{
    float:left;
    overflow:hidden;
    max-width:170px;
    width:37%;
}

#imagesContainer > img {
    margin: 0;
    height: auto;
    width: 100%;
    display: block;
    vertical-align: bottom;
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
    /* Firefox 3.5+ */

}
div#content img.clicked {
    margin: 0px;
    margin-left: 210px !important;
    max-height: 100%;
    max-width: 100%;
    width: auto;
    height: auto;
    -webkit-filter: none;
    position: fixed;
    top: 0px;
}

#loader {
    float:right;
    width:58%;
    max-width:200px;
    overflow:hidden;
    border:1px solid blue;
    position:relative;
}

#loader img {
    width:99%;  
}

jQuery的

$(document).ready(function() {

    var loader = $('#loader'),
        imgDiv = $('#imagesContainer');

    loader.height(loader.parent().height()); // sets loader to parent height

    imgDiv.find('img').on('click', function() {
        var getSrc = $(this).attr('src');
        console.log(getSrc);
       loader.find('img').attr('src', getSrc);
    });


});

Answer 3

我在CSS中添加了以下代碼：

div#image-space {
    width: 100%;
    height: 100px;
    padding: 0;
    margin: 0;
}
nav {
    width: 30%;
    float: left;
}
div#content {
    float: left;
}
div#content img.clicked {
    width: 50%;
    float: left;
}

您想要的是容器空格嗎？ http://jsfiddle.net/P32r8/19/