javascript - 使用javascript onclick放大图像

Question

我已经使用 javascript 创建了一个 onclick 按钮来根据其颜色更改元素的图像。但是，单击按钮后，新图像沿用了原始图像的宽度和高度。有没有办法在点击按钮后放大图像？

这些是我的 html、css 和 javascript 代码。

function change1() {
  eyeliner1.src = "https://s5.postimg.org/lj0ifekvr/Tattoo_Liner.png";
}

function change2() {
  eyeliner1.src = "https://s5.postimg.org/6lllv5mif/Tattoo_Liner_Mad_Max_Brown.png";
}

.center {
  display: block;
  margin: 0 auto;
}
.button {
  text-align: center;
  padding: 15px 32px;
}
.buttondeco {
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 3px #888;
  height: 30px;
  width: 30px;
  color: white;
  text-decoration: none;
  cursor: pointer;
  margin-left: 5px;
}

<div id="eye">
  <img class="center" src="https://s5.postimg.org/lj0ifekvr/Tattoo_Liner.png" id="eyeliner1" alt="Tattoo Liner" height="300" width="119">
  <div class="button">
    <button class="buttondeco" style="text-align:center; background-color: #000;" id="size" onclick="change1()"></button>
    <button class="buttondeco" style="text-align:center; background-color: #644741;" onclick="change2()"></button>
  </div>
</div>

Answer 1

试试这个......相应地给出你想要的宽度和高度

function change1() {
  eyeliner1.src = "https://s5.postimg.org/lj0ifekvr/Tattoo_Liner.png";
  eyeliner1.height="500"; //Your desired Height
  eyeliner1.width="219"; //Your desired Width
}

function change2() {
  eyeliner1.src = "https://s5.postimg.org/6lllv5mif/Tattoo_Liner_Mad_Max_Brown.png";
  eyeliner1.height="700";  //Your desired Height
  eyeliner1.width="419"; //Your desired Width
}

.center {
  display: block;
  margin: 0 auto;
}
.button {
  text-align: center;
  padding: 15px 32px;
}
.buttondeco {
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 3px #888;
  height: 30px;
  width: 30px;
  color: white;
  text-decoration: none;
  cursor: pointer;
  margin-left: 5px;
}

<div id="eye">
  <img class="center" src="https://s5.postimg.org/lj0ifekvr/Tattoo_Liner.png" id="eyeliner1" alt="Tattoo Liner" height="300" width="119">
  <div class="button">
    <button class="buttondeco" style="text-align:center; background-color: #000;" id="size" onclick="change1()"></button>
    <button class="buttondeco" style="text-align:center; background-color: #644741;" onclick="change2()"></button>
  </div>
</div>