html - CSS Max-height/width 100% 溢出

Question

我在 div 中有图像，还有一些 css 将所有内容分开，但我遇到了一个问题，即主图像溢出视口（图像在窗口边缘被截断），即使我有

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

目前， max-height: 100% 填充高度，而 max-width: 100% 导致溢出（反之亦然，具体取决于尺寸）。我希望它首先填充宽度或高度，以较小者为准

见： http: //jsfiddle.net/P32r8/ http://jsfiddle.net/P32r8/7/

更新：图片！它目前正在做第一个，我希望它做第二个。

Answer 1

我在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/

Answer 2

在你的CSS中你写过

现在第三次编辑嘿嘿

我重写了一些部分，最值得注意的是删除position:fixed;了nav http://jsfiddle.net/CRjf7/

Answer 3

UPDATE

I had to redo most of the code in order for everything to work properly.

Demo: 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);
    });


});