Question

我的代码生成了这个（帖子末尾的代码）：

Wide Browser Display

当我拖入时，我希望图像调整大小，他们这样做（最终我将添加一些代码，将它们放在一定大小后的主图像下方），但第二个右手图像调整到位，而不是低于它上面的图像：

Thinner browser windows

知道怎么解决吗？这是我的代码：

CSS

 body 
{
    font-family: Arial, sans-serif;
    font-size: 16px;
    width: 100%;
    height: 100%;
}

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

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

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

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

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

#news-item-four
{
    width: 230px;
    max-width: 100%;
    height: 160px;
    max-height: 100%;
    float: left;
    margin-bottom: 10px;
}

#news-item-five
{
    width: 230px;
    max-width: 100%;
    height: 160px;
    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/NewsFeatureImage.jpg" />
                </div>
            </div>

            <div id="main-column-right">
                <div id="news-item-four">
                    <img src="Images/NewsImageFour.jpg" />
                </div>

                <div id="news-item-five">
                    <img src="Images/NewsImageFive.jpg" />
                </div>
            </div>

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

Answer 1

删除.news-item-four

上的固定高度

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

目前，图片正在调整大小，但容器（.news-item-four）不是。

DEMO

响应式图像不会崩溃

1 个答案: