可以通过使用 HTML 中的 <img>
标签和 CSS 中的 max-width
和 max-height
属性来实现缩略图预览。
具体地说,可以在 HTML 中使用 <img>
标签来加载原始图像,并使用 CSS 设置 max-width
和 max-height
属性来限制图像的最大宽度和高度,从而实现缩略图预览。例如:
<img src="path/to/image.jpg" alt="thumbnail" style="max-width: 200px; max-height: 200px;">
在上面的示例中,src
属性指定要加载的原始图像的路径,alt
属性指定图像的替代文本,style
属性使用 CSS 设置最大宽度和高度为 200 像素。这将使图像在页面上以缩略图的形式显示,同时保持其纵横比。
需要注意的是,为了提高页面的加载速度,建议在加载缩略图时使用较小的图像文件,而不是直接加载原始图像。可以使用图像编辑软件或在线工具来创建缩略图。