0

这是一个小提琴。

最终产品将在 上水平滚动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 回答
0

对于 CSS，我猜你可以使用：

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

使用 > 使此配置在每个地方都相同，但将 img 或 ul 或 nav 排除在外，它看起来会完全不同

于 2013-07-03T07:49:00.687 回答
0

你想要的是纯 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/

于 2013-07-03T01:19:03.010 回答