Question

我想创建一个水平滚动图像面板，其中包含最大高度为800px的大图像。调整浏览器大小时，我希望根据浏览器窗口的大小，整个图像选择变小/变大。我希望图像的顶部在顶部悬挂200px，左边是30px边距（加载页面时），底部是30px。

我真的很陌生，所以任何帮助都会非常感激

到目前为止，HTML看起来像这样：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Dean Pauley — Recent work</title>
        <link href='http://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" type="text/css" href="style.css" />
    </head>
    <body>
        <div id="infoleft">
            <ul>
                <li><a href="index.html">Dean Pauley</a></li>
                <li>Graphic Design</li>
            </ul>
        </div>
        <div id="inforight">
            <ul>
                <li><a href="#">Information</a></li>
            </ul>
        </div>
        <div id="images">
            <img src="images/NFN800.jpg" width="948" height="800"  id="fullsize" />
            <img src="images/NFN800.jpg" width="948" height="800"  id="fullsize" />
            <img src="images/NFN800.jpg" width="948" height="800"  id="fullsize" />
            <img src="images/NFN800.jpg" width="948" height="800"  id="fullsize" />
            <img src="images/NFN800.jpg" width="948" height="800"  id="fullsize" />
            <img src="images/NFN800.jpg" width="948" height="800"  id="fullsize" />
        </div>
    </body>
</html>

css：

@charset "UTF-8";
/* CSS Document */

body {
    font-family: 'Questrial', sans-serif;
}

#infoleft { 
    position:fixed;
    top:20px;
    left:0px;
    font-weight:normal;
    font-size: 15px;
    letter-spacing: 0.13em;
}

#infoleft ul {
    height:20px;
    font-weight:normal;
    font-size: 15px;
    letter-spacing: 0.13em;
    text-decoration:none;
    margin: 0;
    padding: 0;
    list-style-type: none;
}

#infoleft ul li { 
    display: inline; 
    padding: 30px;
}       

#inforight {    
    position:fixed;
    top:20px;
    right:30px;
    font-weight:normal;
    font-size: 15px;
    letter-spacing: 0.13em;
}

#inforight ul {
    height:20px;
    font-weight:normal;
    font-size: 15px;
    letter-spacing: 0.13em;
    text-decoration:none;
    margin: 0;
    padding: 0;
    list-style-type: none;
}

#images {
    position:absolute;
    left:20px;
    bottom:30px;
    top:200px;
    width:25000px;
    height:800px;
    padding-top:100px;
    padding-bottom:30px;
}

img {
    padding:10px;
}   

a {
    text-decoration:none; color:#000;
}

a:hover {
    color:#0080ff;
}

最有效的方法是什么？非常感谢adavnce

修改

On page load

On scroll

On 75% decrease window

页面加载

滚动

减少75％的窗口

Answer 1

对于“#images”和“img”部分，对CSS的这些更改怎么样......

#images {
    position:absolute;
    left:20px;
    bottom:30px;
    top:200px;
    border: 2px ridge gray;
    width: 90%;
    display: inline-block;
    overflow: scroll;
    white-space: nowrap;
}

img {
    padding:10px;
    width:50%;
    height:95%;
}

您可以使用这些值，但是您应该获得一个水平滚动图像部分，该部分会在调整窗口大小时发生变化...

如果您愿意，可以关闭灰色边框 - 我只是用它进行测试......

修改

使用绝对定位而不是相对来上传代码示例，因为它使图像部分保持在底部30px ...

Answer 2

我会将与图像相关的尺寸测量值更改为％而不是px。这样，图像，填充，边距等的大小将随浏览器窗口的大小而变化，尽管比例将保持不变。

示例：img {width：80％;高度：60％;等}

修改

使用Zack的部分回答，我会将你的css img规则更改为：

img { padding:10px; width:3.799; height:100%; }

这将为您提供一个根据浏览器窗口大小调整的图像。但是，您需要使用百分比（％）来调整您的定位规则（即左侧，顶部，填充，边距等）以保持所有比例相同。

注意

此时我只是调整示例，所以为了记录，Zack的设计效率更高，如果外观满足你会更好。

可扩展的侧滚动故障

2 个答案: