Question

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

我对此非常陌生，所以任何帮助都会非常感激最有效的方法是什么？非常感谢adavnce

到目前为止，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;
}

Answer 1

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

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

具有可伸缩性的水平图像滚动

1 个答案: