Question

我是HTML，CSS和Javascript的新手。当我点击它时，我试图让我的照片弹出更大但我不知道如何实现它。我一直在努力寻找一个好的Javascript教程，但为此解释了一种技术。请帮忙。（我所知道的是将图像放在网页上的代码）。

我希望看起来像这样。

http://www.w3schools.com/jquerymobile/tryit.asp?filename=tryjqmob_popup_image

但他们没有在教程中显示javascript

Answer 1

＆＃13;

body {
  padding: 3em;
}

img {
  transition: transform .5s;
}

img:hover {
  transform: scale(2.5);
}

＆＃13;

<img src="//www.gravatar.com/avatar/9708ca3dca5969e124d0730acf48d2e7?s=32&d=identicon&r=PG&f=1">

＆＃13;

有关浏览器支持和供应商前缀的详细信息，请参阅http://caniuse.com/#feat=transforms2d和http://caniuse.com/#search=transition。

Answer 2

试试这个。使用您的图像名称更改src。此致！

<html>
<head>
<style>
    .pop-out
    {
        transition: transform .5s;
    }

    .pop-out:hover
    {
        -ms-transform: scale(1.5, 1.5);
        -webkit-transform: scale(1.5, 1.5);
        transform: scale(1.5, 1.5);
    }
</style>
</head>
<body>
    <img src="test.jpg" class="pop-out">
    </body>
</html>

Answer 3

我有两个很好的解决方案：）

选项1）

<强> HTML

<img id="image" src="">

<强> CSS

#image {
    width: 100%;
}
#image:hover {
    width: 150%;
}

选项2）

<强> HTML

<img id="image" src="">

<强> CSS

#image {
    width: 100%;
}
#image:hover {
    transform: scale(1.5);
}

很简单，在两个例子中，我都将图像尺寸增加了50％。现在，执行此操作的两种方法是使width更大，或使用scale(x.x)。

我希望我能帮忙！：）

当我点击它时，我想让我的图像变得更大

3 个答案:

选项1）

选项2）