html页面里面如何实现点击小图放大查看大图

需要准备的材料分别有：电脑、浏览器、html编辑器。

1、首先，打开html编辑器，新建html文件，例如：index.html。

2、在index.html中的<style>标签中，输入css代码：

div {width: 72pxheight: 72pxbackground: url(small3.png) no-repeatoverflow: hidden}

3、浏览器运行index.html页面，此时成功将矩形图片只显示了正方形部分。

4、点击小图后，成功显示了大图。

html文件中引用的代码没有在css中进行定义，尤其是图片引用了无关本路径的图片，造成了界面一直处在加载状态。

出现一直加载状态导致网页中一些图片显示不正常的情况时，需要检查当前页面引用图片代码的路径是否正确，二就是查看是否有无关代码没有定义和无关图片。

是html的问题还是CSS的问题。

重点排查图片是不是设置高度和宽度是像素，如果是像素的话不同分辨率会显示不一样的效果。建议设置成百分比。

不同浏览器显示不一样不是分辨率的问题的话检查CSS。