gpt4 book ai didi

Javascript 仅在点击时显示完整图像,否则适合屏幕

转载 作者:太空宇宙 更新时间:2023-11-04 12:48:30 27 4
gpt4 key购买 nike

我正在尝试在网页上显示单个图像,以便:

如果图像小于用户的屏幕。显示完整图像

否则,如果图像大于用户的屏幕,那么它应该适合屏幕并且只有在单击图像后才会显示全尺寸。

这是我的html

<html>
<body>
<div class="img">
<img src="imagepathhere.jpg" />
</div>

</body>
</html>

这是我尝试过的 css,但我想仅使用 css 是不可能的:

    <style>
html,body{
min-width:100%;
margin:0px;
padding:0px;
}

.img {
padding:0px;
width:auto;
text-align:center;
margin:auto;
}
.img img {
max-width:100%;
}
</style>

最好的方法是什么?

艾玛。

最佳答案

点击时切换 max-width:100%

最简单的方法是将此属性添加到类中,而不是将其应用于标签名称

.img .shrinkToFit {
max-width:100%;
}

然后使用 JQuery 在点击时切换它

$(".img").on("click", function() {
$(this).find("img").toggleClass("shrinkToFit");
});

示例:http://jsfiddle.net/TrevinAvery/anryho0o/

关于Javascript 仅在点击时显示完整图像,否则适合屏幕,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26315582/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com