0

div に画像があり、すべてのスペースを空ける css がありますが、メインの画像がビューポートを超えてオーバーフローしている (ウィンドウの端で画像が切り取られている) という問題があります。

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

現在、max-height: 100% は高さを埋め、max-width: 100% はオーバーフローを引き起こします (サイズによってはその逆)。最初に画像が幅または高さの小さい方を埋めるようにしたい

参照: http://jsfiddle.net/P32r8/ http://jsfiddle.net/P32r8/7/

更新：画像！現在1本目をやっていて、2本目もやってみたいです。 何をしているのか

やりたいこと

4

3 に答える 3

0

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/

于 2013-07-08T02:03:44.580 に答える
-1

アップデート

すべてが正しく機能するために、ほとんどのコードをやり直さなければなりませんでした。

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


});
于 2013-07-08T00:47:25.860 に答える