Question

我正在使用hl 5和sublime，我希望第二个计算器背景中的图像具有相同的计算器尺寸。

这是html代码：

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="design2.css" >
    <title>Calculator Italy</title>
</head>
<body bgcolor="skyblue">
    <form>
        <div id="italyCalc">
            <input type="text" id="display" disabled><br>

            <input type="button" id="item1" onclick="adding('1')" value="1" >
            <input type="button" id="item1" onclick="adding('2')" value="2" >
            <input type="button" id="item1" onclick="adding('3')" value="3" >
            <input type="button" id="item1" onclick="adding('+')" value="+" ><br>

            <input type="button" id="item2" onclick="adding('4')" value="4" >
            <input type="button" id="item2" onclick="adding('5')" value="5" >
            <input type="button" id="item2" onclick="adding('6')" value="6" >
            <input type="button" id="item2" onclick="deleteLast()" value="<--" ><br>

            <input type="button" id="item1" onclick="adding('7')" value="7" >
            <input type="button" id="item1" onclick="adding('8')" value="8" >
            <input type="button" id="item1" onclick="adding('9')" value="9" >

            <input type="button" id="item1" onclick="adding('.')" value="." ><br>
            <input type="button" id="item2" onclick="adding('0')" value="0" >
            <input type="button" id="item2" onclick="adding('-')" value="-" >
            <input type="button" id="item2" onclick="adding('*')" value="*" >
            <input type="button" id="item2" onclick="adding('/')" value="/" ><br>

            <input type="button" id="itemBig" onclick="adding('C')" value="C" >
            <input type="button" id="item1" onclick="power('2')" value="X^2" >
            <input type="button" id="itemBig" onclick="returnResult()" value="=" >

        </div>
        <div id="italyCalc2">
            <input type="text" id="display2" disabled><br>


            <input type="button" id="item" onclick="adding2('1')" value="1" >
            <input type="button" id="item" onclick="adding2('2')" value="2" >
            <input type="button" id="item" onclick="adding2('3')" value="3" >
            <input type="button" id="item" onclick="adding2('+')" value="+" >
            <input type="button" id="item" onclick="power3('3')" value="X^3" ><br>

            <input type="button" id="item" onclick="adding2('4')" value="4" >
            <input type="button" id="item" onclick="adding2('5')" value="5" >
            <input type="button" id="item" onclick="adding2('6')" value="6" >
            <input type="button" id="item" onclick="deleteLast2()" value="<--" >
            <input type="button" id="item" onclick="sin2()" value="sin" ><br>

            <input type="button" id="item" onclick="adding2('7')" value="7" >
            <input type="button" id="item" onclick="adding2('8')" value="8" >
            <input type="button" id="item" onclick="adding2('9')" value="9" >

            <input type="button" id="item" onclick="adding2('.')" value="." >
            <input type="button" id="item" onclick="cos2()" value="cos" ><br>
            <input type="button" id="item" onclick="adding2('0')" value="0" >
            <input type="button" id="item" onclick="adding2('-')" value="-" >
            <input type="button" id="item" onclick="adding2('*')" value="*" >
            <input type="button" id="item" onclick="adding2('/')" value="/" >
            <input type="button" id="item" onclick="root2('2')" value="sqrt" ><br>

            <input type="button" id="itemBig2" onclick="adding2('C')" value="C" >
            <input type="button" id="itemBig2" onclick="returnResult2()" value="=" >

        </div>
    </form>
<script src="logic2.js"></script>
</body>
</html>

这是css代码的一部分：

#italyCalc2
{
    height: 530px;
    width: 300px;
    border: 3px solid green;
    box-shadow: 0px 0px 100px green;
    background-image: url("https://tse3.mm.bing.net/th?id=OIP.M4cfd6650aaff3feadc8bed590687b6b7H0&pid=15.1&P=0&w=274&h=172");
    margin: 100px;
    text-align: center;
    float:left;

}

正如你所看到的，我希望意大利国旗与计算器具有相同的维度，但我不知道该怎么做（我不想看到太多的旗帜......）。

有人可以帮助我吗？

Answer 1

我正在考虑第二个计算器的标志我已经改变了一点css

  #italyCalc2
  {
   width: 300px;
   border: 3px solid green;
   box-shadow: 0px 0px 100px green;
   background-image: url("https://tse3.mm.bing.net/th?id=OIP.M4cfd6650aaff3feadc8bed590687b6b7H0&pid=15.1&P=0&w=274&h=172");
   margin: 100px;
   text-align: center;
   float:left;
   background-size: cover;
}

在此处查看 https://jsfiddle.net/Lddm4su5/#&togetherjs=hDGbu12Hms

Answer 2

只需改变你的css：

#italyCalc2
{
height: 160px;
width: 300px;
border: 3px solid green;
box-shadow: 0px 0px 100px green; 
background: url("https://tse3.mm.bing.net/th?id=OIP.M4cfd6650aaff3feadc8bed590687b6b7H0&pid=15.1&P=0&w=274&h=172") no-repeat center center;
background-size: 100%; 
background-position: top center;
background-repeat:no-repeat;
margin: 100px;
text-align: center;
float:left;
}

html按钮图像适应

2 个答案: