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、点击小图后，成功显示了大图。

页面的现实的大小超过了浏览器窗口的可视范围，就会出现滚动条。

你要去掉页面的滚动条 两个方法：

1、放大浏览器的窗口

2、在页面中添加样式：

html,body{

overflow:hidden

height:100%

}

机响应式布局，是获取屏幕尺寸，在某个区间用一种css，另个区间用另一种css。需要用@media写多份css的。无法做到真正的随屏幕变化而变化。

而《meta name="viewport" content="width=device-width" /》的用法是随着屏幕的大小，自动把页面自适应到屏幕的大小。这个是管用的。

em是字体的宽度，也就是一个字体宽12px，那么em=12px；字体为15px，em=15px；一般用来动态控制字体外的区块大小去适应字体，而不是用来设置字体的大小的

---