Question

我有一个图像模式。像facebook这样的东西在messenger中显示图像。我想在gmail上添加放大和缩小按钮，比如pdf viewer？具有。我怎么能用按钮放大和缩小图像？使用javascript？

Answer 1

取决于您想要如何缩放它。您可以通过修改width标记的height和img来缩放它。如果这不是一个选项，例如您的模态具有固定大小，则可以更改transform属性。你想缩放它。由于这是一个CSS属性，让我们看一个基于这个缩放思想的CSS规则的例子：

HTML：

<div class="item">
  <img src="http://someurl/0v15321t3W1a/pepsi.jpg" alt="pepsi" width="540" height="548">

  <div class="item-overlay top"></div>
</div>

CSS：

* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.item {
  position: relative;

  border: 1px solid #333;
  margin: 2%;
  overflow: hidden;
  width: 540px;
}
.item img {
  max-width: 100%;

  -moz-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.item:hover img {
  -moz-transform: scale(1.4);
  -webkit-transform: scale(1.4);
  transform: scale(1.4);
}

取自here。请注意，可以使用给定标记的style属性在Javascript中修改CSS属性。

Javascript模态图像缩放

1 个答案: