Html can'；我无法像页面的其他部分一样，让按钮响应迅速、可伸缩_Html_Css

Html can'；我无法像页面的其他部分一样，让按钮响应迅速、可伸缩

html css

Html can'；我无法像页面的其他部分一样，让按钮响应迅速、可伸缩,html,css,Html,Css,这个页面的大部分内容我都能做出响应，但我似乎唯一搞不懂的是这两个按钮。他们使用javascript实现鼠标悬停效果，所以不确定这是否会造成混乱。我基本上只想当你以不同的分辨率查看页面时，图像与页面的其余部分一起缩放 http://74.117.156.152/~pr0digy/ 以下是html： <!DOCTYPE html> <html lang="en"> <head> <title>US Legal Support - C

这个页面的大部分内容我都能做出响应，但我似乎唯一搞不懂的是这两个按钮。他们使用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>

我明白了。新的资本支出按钮在FF中适当地缩放

尝试将.capexstatus img{width:100%；}添加到CSS中，查看右按钮是否也可以缩放。

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

<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>

第三,。我把第二个图像的宽度也100%

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

您的HTML无效，这就是原因。请不要绕过错误消息。与临时站点或活动站点相比，使用演示站点（如或）更为可取。此外，您可能希望在CSS中浮动.capexstatus，我注意到，当我调整浏览器窗口大小时，它会按左下方的右按钮。

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

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

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