0

これがFiddleです。

最終製品は で水平方向にスクロールするmousemoveため、overflow: hidden;とwhite-space: nowrap;でul. padding高さが静的であるため、上部と下部はヘッダーとフッター用です。

ウィンドウのサイズを垂直方向に変更するまでは、Fiddle で問題なく表示されます。その時点で画像がゆがみます。重要なのは、ウィンドウのサイズが変更されるたびに、画像が最大の高さを占めli、幅が許す限り多くの s を表示する必要があるということです。サイズ変更時に適切な縦横比を維持するために画像を取得するにはどうすればよいですか?

これが私のコードです：

HTML:

<nav>
    <ul>
        <li><img src="http://dummyimage.com/400x600/000000/fff.png" /></li>
        <li><img src="http://dummyimage.com/400x600/000000/fff.png" /></li>
        <li><img src="http://dummyimage.com/400x600/000000/fff.png" /></li>
        <li><img src="http://dummyimage.com/400x600/000000/fff.png" /></li>
        <li><img src="http://dummyimage.com/400x600/000000/fff.png" /></li>
        <li><img src="http://dummyimage.com/400x600/000000/fff.png" /></li>
        <li><img src="http://dummyimage.com/400x600/000000/fff.png" /></li>
    </ul>
</nav>

CSS:

* {
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
}

ul {
    padding: 128px 0 32px;
    box-sizing: border-box;
    position: absolute;
    list-style: none;
    height: 100%;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
}

li {
    height: 100%;
    display: inline-block;
    border-right: 1px solid #999;
}

li img {
    height: 100%;
}
4

3 に答える 3

1

と で削除できwidthます。画像はから入手可能な 100% の配給を維持します。<ul>display <li> inlineheight<ul>

http://jsfiddle.net/XEh4p/4/

編集 ：

  1. 縮小画像height:20px;+ min-height:100%,
  2. widthのサイズの水平座標<ul>
* {
    margin: 0;
    padding: 0;
}

html, body,nav,ul {
    height: 100%;
}


ul {
    padding: 128px 0 32px;
    box-sizing: border-box;
    position: absolute;
    list-style: none;
    height: 100%;
    white-space: nowrap;
    overflow:hidden;
    left:0;
    right:0; 
}

li {
    height: 100%;

    display:inline;
    vertical-align:top;
    width:auto;
}

li img {
    height: 20px;
    min-height:100%;
    border-right: 1px solid #999;
}
于 2013-07-03T01:31:21.303 に答える