如何使用HTML和/或CSS缩小大图像

Sta*_*tec 3 html css image

获取我想要在网页上使用的较小版本图像的最佳方法是什么,但如果他们点击"查看图像",仍然允许该人查看完整图像?这个问题可以真正分为两部分:

假设我的图像是900x900px:有没有办法可以以更小的尺寸显示该图像,例如100x100px(这样浏览器就不必加载整个900px图像)但是如果他们点击"查看图片",允许该人看到全尺寸图片?

此外,采用900px图像并以100px显示的最佳方式是什么?假设我不能提前使用照片编辑软件,我应该在HTML或CSS中使用高度和宽度标签吗?(看起来他们都调整了图像(比例)而不是裁剪).谢谢

Phi*_*ier 5

使用heightwidth属性的常用方法,整个图像仍然必须传输到浏览器.

因此,如果您在某处添加链接(图像本身可能是链接),则用户仍然可以访问完整的(900 x 900像素)图像.

关于图像裁剪:您可以使用本SO答案中概述的一些技巧.

JsFiddle演示1(图像本身用作原始全尺寸图像的链接)

JsFiddle演示2(使用第一个演示作为基础,但这次裁剪图像)