Question

我已经将此页面的大部分内容都反应灵敏，但我唯一无法弄清楚的是两个按钮。他们正在使用javascript进行鼠标悬停效果，因此不确定是否存在混乱。我基本上只是希望在您以不同的分辨率查看图像时，图像与页面的其余部分一起缩放。

http://74.117.156.152/~pr0digy/

这是html：

<!DOCTYPE html>
<html lang="en">

<head>
        <title>US Legal Support - CapEx</title>
        <meta charset="utf-8" />

        <link rel="stylesheet" href="style.css" type="text/css" />
        <meta name="viewport" content="width-device-width, initial-scale-1.0">

        <script type="text/javascript">
if (document.images) {
    new1 = new Image;
    new2 = new Image;
    existing1 = new Image;
    existing2 = new Image;
    new1.src = "images/new1.png";
    new2.src = "images/new2.png";
    existing1.src = "images/existing1.png";
    existing2.src = "images/existing2.png";
}
function swapImage(thisImage,newImage) {
    if (document.images) {
        document[thisImage].src = eval(newImage + ".src");
    }
}
</script>

</head>

<body class="body">

        <header class="mainHeader">
            <img src="images/uslegalbox.png" alt="usls box" >
        </header>

        <div class="textBox">

            <div class="text">
                    <h1>Capital</h1>
                    <h2>Expenditures</h2>
            </div>

            <div class="buttonsBox">
                <div class="newcapex">
                    <a href="#" onMouseOver="swapImage('new','new2')" onMouseOut="swapImage('new','new1')"><img src="images/new1.png" class="ri" name="new" alt="new capex"></a>
                </div>
                    <div class="capexstatus">
                        <a href="#" onMouseOver="swapImage('existing','existing2')" onMouseOut="swapImage('existing','existing1')"><img src="images/existing1.png" class="ri" name="existing" alt="check status" width="310px" height=$
                    </div>
            </div>

        </div>

</body>

CSS：

body {
        background: url('images/bg.jpg');
        background-size: 100%;
        background-repeat:no-repeat;
        color: #000305;
        font-size: 87.5%; /* Base font size is 14px */
        font-family: Arial; 'Lucida Sans Unicode';
        text-align: left;
        width: 100%;
        margin: 0;
        padding: 0;
        height: 100%;
}

.mainHeader {
    width: 30%
        height: auto;
        margin: 2% 0 0 -1%;
}

.mainHeader img {
        width: 35%;
        height: 100%;
}

.textBox {
    height: 275px;
        margin-top: 3%;
        background-image: url('images/buttonsbox.png');
        background-repeat: repeat-x;
}

.text {
        width: 40%;
        margin-left: 5%;
        float: left;
        margin-top: -1%;
}

.buttonsBox {
    width: 55%;
        float: right;
        margin-top: 50px;
}

.newcapex {
    float: left;
        border: 0;
        margin-top: 45px;
}

.capexstatus {
    margin-left: 50%;
        border: 0;
        margin-top: 45px;
}

.newcapex img {
        width: 100%;
}

/* Text */

h1 {
        color: #ffffff;
        font-size: 5.0em;
        margin-top: 60px;
}

h2 {
        color: #ffffff;
        font-size: 5.0em;
        margin-top:-30px;
}

Answer 1

我看到.newcapex按钮在FF中正确缩放。

尝试添加.capexstatus img {width：100％;到你的CSS，看看右键是否也可以缩放。

Answer 2

首先，删除图像的所有绝对尺寸

<div class="buttonsBox">
    <div class="newcapex">              
        <a href="#" onmouseover="swapImage('new','new2')" onmouseout="swapImage('new','new1')">
            <img src="CapEx_arquivos/new1.png" class="ri" name="new" alt="new capex">
        </a>                
    </div>
    <div class="capexstatus">               
        <a href="#" onmouseover="swapImage('existing','existing2')" onmouseout="swapImage('existing','existing1')">
            <img src="CapEx_arquivos/existing1.png" class="ri" name="existing" alt="check status">
        </a>
    </div>
</div>

二。我将float属性设置为capex状态，并将容器的宽度设置为40％

.newcapex {
    float: left;
    border: 0;
    margin-top: 45px;
    width: 40%;
}

.capexstatus {
    float: right;
    border: o;
    margin-top: 45px;
    margin-right: 20px;
    width: 40%;
}

第三。我把宽度为100％的第二张图片放了。

.newcapex img, .capexstatus img {
    width: 100%;
}

不能让按钮响应和扩展像我的页面的其余部分

2 个答案: