0

前の質問のフォローアップ。スケーラブルな画像を使用して Web ページの作成を開始しました。全幅では次のようになります。

全幅

縮小すると、次のようになります。

縮小されました

ご覧のとおり、右側の 2 つの画像は、メインの画像に合わせて拡大縮小されていないようです。これを達成してうまくスケーリングする方法がわかりますか?

ここにコード：

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>

ありがとう。

4

0 に答える 0