获取我想要在网页上使用的较小版本图像的最佳方法是什么,但如果他们点击"查看图像",仍然允许该人查看完整图像?这个问题可以真正分为两部分:
假设我的图像是900x900px:有没有办法可以以更小的尺寸显示该图像,例如100x100px(这样浏览器就不必加载整个900px图像)但是如果他们点击"查看图片",允许该人看到全尺寸图片?
此外,采用900px图像并以100px显示的最佳方式是什么?假设我不能提前使用照片编辑软件,我应该在HTML或CSS中使用高度和宽度标签吗?(看起来他们都调整了图像(比例)而不是裁剪).谢谢
使用height和width属性的常用方法,整个图像仍然必须传输到浏览器.
因此,如果您在某处添加链接(图像本身可能是链接),则用户仍然可以访问完整的(900 x 900像素)图像.
关于图像裁剪:您可以使用本SO答案中概述的一些技巧.
JsFiddle演示1(图像本身用作原始全尺寸图像的链接)
JsFiddle演示2(使用第一个演示作为基础,但这次裁剪图像)