Question

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

最近想要实现一个功能，就是用手机拍照之后在html页面上显示一个缩略图(拍照成功之后会返回一个很长的字符串，代表当前拍到的照片)，但是手机拍到的照片的宽度和高度是不同的，横拍是3264*2448，竖拍是2448*3264，如果我把img的宽度和高度设置为100*100，即宽度和高度一样大，那么等下图片会被拉伸或者压缩，我想向QQ空间或者微信朋友圈那样，以短的那边作为边长，截取一个正方形显示出来，请问要怎么弄比较好？谢谢

Answer 1

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

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

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

div {width: 72px;height: 72px;background: url(small3.png) no-repeat;overflow: hidden;}

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

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

Answer 2

楼主的意思我看明白了，这里可以将图片作为背景插入盒子中，那么怎么实现以短边剪裁图片呢，这里涉及一个background参数，补充一下：

background-size：宽 高；

只设置其中一个值，另一个值设置为auto，就能将图片等比例缩放。将短边值设为100px，长边auto，就可以实现了。配合background里面图片位置属性，就能调节图片哪一部分显示出来，比如background：url（） no-repeat center center；background-size：100px  auto

就能让竖拍实现。横拍100px和auto换位置就可以了。

另外再补充两个参数：

background-size：cover （铺满图片，可能超出）
background-size：cotain（铺满图片，宽高之一铺满即停止）

Answer 3

jquery 和 就是都可以实现，思路点击按钮触发事件，事件内容为添加一个叠层内容是一个图片

Answer 4

现在css3图片属性可以设置object-fit: cover;类似背景background-size;cover;

Answer 5

可以吗？