Question

这是Fiddle。

最终产品将在mousemove上水平滚动，因此overflow: hidden;上的white-space: nowrap;和ul。顶部和底部padding用于页眉和页脚，因为它们的高度是静态的。

在你垂直调整窗口大小之前，它在Fiddle看起来很好，此时图像会偏斜。重点是，无论何时调整窗口大小，图像都应占用最大高度，显示宽度允许的li次。如何让图像在调整大小时保持适当的宽高比？

这是我的代码：

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%;
}

Answer 1

您可以移除width和<ul> display <li>上的inline。图像将保持定量从height获得<ul>可用的height:20px; 100％。

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

编辑：

缩小图片min-height:100% + 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;
}

{{1}}

Answer 2

你想要的是纯粹的CSS不可能（据我所知）。你必须为此使用一些简单的javascript计算。我不久前写了一个简单的解决方案。

https://github.com/yckart/jquery.fitpic.js

function fitPic(img, parent) {
    var winW = window.innerWidth || $(parent || window).width(),
        winH = window.innerHeight || $(parent || window).height(),

        // get the image dimensions
        imgW = img.width,
        imgH = img.height,

        // calculate the ratio
        ratioW = (imgW * winH) / imgH,
        ratioH = (imgH * winW) / imgW,

        // check/compare the width and height
        width = ratioW < winW ? winW : ratioW,
        height = ratioH < winH ? winH : ratioH,

        // position/center the image
        left = (width - winW) / 2,
        top = (height - winH) / 2,

        style = img.style;

    // apply new dimensions for image
    style.width = width + 'px';
    style.height = height + 'px';
    style.marginTop = -top + 'px';
    style.marginLeft = -left + 'px';
}

http://fiddle.jshell.net/XEh4p/3/

Answer 3

对于CSS我猜你可以使用：

  #nav > ul > li img{
   width: ... ;
   height: ... ;
   etc.
  }

使用＆gt;在每个相同的位置进行此配置，但将img或ul或nav保留，它将看起来完全不同

让<li>和<img/>元素在调整大小时尊重宽高比</li>

3 个答案: