如何使以下代码对页面上的所有图像做出响应？ [英] How do I make the following code responsive for ALL images on page?
本文介绍了如何使以下代码对页面上的所有图像做出响应？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
Got this code and was wondering if it was possible to make it responsive of all images on the page. So would work on any device with the zoom. The code is an image zoom like you find on Amazon etc. And would like to make all images responsive if possible. Plus have the zoom work if that is doable. Any help is appreciated and thanks in advance.
<!Doctype html>
<html>
<head>
<title>Demo Example</title>
<script src="js/jquery-1.6.js"></script>
<script src="js/jquery.jqzoom-core.js"></script>
<link href="css/jquery.jqzoom.css" rel="stylesheet" />
</head>
<body style="">
<div style="position:relative;top:200px;left:300px;width:600px;">
<a href="images/bike.jpg" class="minipic" title="Cartoon Bike"><img src="images/bikethumb.jpg" title="Bike"/></a>
<a href="images/yummy.png" class="minipic" title="Apple"><img src="images/yummythumb.png" title="apple"/></a>
<script type="text/javascript">
$(document).ready(function () {
$('.minipic').jqzoom({
zoomType: 'standard',
lens: true,
preloadImages: false,
alwaysOn: false,
zoomHeight: 250,
zoomWidth:250
});
});
</script>
</div>
</body>
</html>
我尝试过：
不确定是否可以使上述代码响应，或者不是
What I have tried:
Not sure if it is possible or not to make the above code responsive, or not
推荐答案
（document）.ready（ function（）{
(document).ready(function () {
（'。minipic'）。jqzoom（{
zoomType：'standard'，
lens：true，
preloadImages：false ，
alwaysOn：false，
zoomHeight：250，
zoomWidth：250
}）;
}）;
< / script>
< / div>
< / body>
< / html>
('.minipic').jqzoom({ zoomType: 'standard', lens: true, preloadImages: false, alwaysOn: false, zoomHeight: 250, zoomWidth:250 }); }); </script> </div> </body> </html>
我尝试过：
不确定是否可以使上述代码响应，或者不是
What I have tried:
Not sure if it is possible or not to make the above code responsive, or not
这篇关于如何使以下代码对页面上的所有图像做出响应？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
