Question

对上一个问题的跟进。我已经开始使用可缩放图像构建我的网页，全宽度看起来像这样：

Full width

按比例缩小时，它看起来像这样：

Scaled down

正如您所看到的那样，两个右手图像似乎与主图像不一致。你能看到实现这一目标的方法吗？它可以很好地扩展吗？

代码在这里：

body 
{
    font-family: Arial, sans-serif;
    font-size: 16px;
    width: 100%;
    height: 100%;
    background-color: #4c4c4c;
}

img
{
    width: inherit;
    max-width: 100%;
    height: auto;
}

#wrapper
{
    width: 710px;
    max-width: 90%;
    margin: 0 auto;
}

#main-column-left
{
    max-width: 66%;
    margin-right: 1%;
    float: left;
}

#main-column-right
{
    max-width: 33%;
    float: left;
}

#news-feature
{
    width: 471px;
    max-width: 100%;
    /*max-height: 100%;*/
    /*height: 330px;*/
    float: left;
    display: block;
}

#news-item-four
{
    width: 231px;
    max-width: 100%;
    /*max-height: 100%;*/
    float: left;
    margin-bottom: 1%;
}

#news-item-five
{
    width: 231px;
    max-width: 100%;
    /*max-height: 100%;*/
    float: left;
}

.clear
{
    clear: both;
}

HTML

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>

    <link rel="stylesheet" type="text/css" href="CSS/Styles.css" />
</head>
<body>
    <div id="wrapper">
            <div id="main-column-left">
                <div id="news-feature">
                    <img src="Images/News01.jpg" height="470" width="330" />
                </div>
            </div>

            <div id="main-column-right">
                <div id="news-item-four">
                    <img src="Images/News04.jpg" width="230" height="160" />
                </div>

                <div id="news-item-five">
                    <img src="Images/News05.jpg" width="230" height="160" />
                </div>
            </div>

            <br class="clear" />
    </div>
</body>
</html>

感谢。

缩放不同大小的图像

0 个答案: