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

Posted 2023-03-05

【中文标题】如何使用 HTML 和/或 CSS 缩小大图像

【英文标题】：How to Scale Down a Large Image Using HTML and/or CSS

【发布时间】：2014-04-18 15:26:12

【问题描述】：

将我想在网页上使用的图像的较小版本，但如果他们点击“查看图像”，仍然允许他们查看完整图像，最好的方法是什么？这个问题实际上可以分为两部分：假设我的图像是 900x900 像素：有没有办法可以以更小的尺寸显示该图像，例如 100x100 像素（这样浏览器就不必加载整个 900 像素的图像），但如果他们单击“查看图像”，则允许该人查看完整尺寸的图像？ 此外，获取 900 像素图像并仅以 100 像素显示的最佳方式是什么？假设我不能用照片编辑软件提前做到这一点，我应该在 html 或 CSS 中使用高度和宽度标签吗？ （似乎他们都调整了图像的大小（比例）而不是裁剪）。谢谢

【问题讨论】：

1) 不能，您必须存储缩小版和完整版。 2) 没关系，但 CSS 会更好，因为如果您创建一个类，它可以在其他页面上重用。

我明白了。吃我的蛋糕，我也不能吃。那么，这里的重点是，在 html 中和在 css 中的缩放几乎没有区别？

正确。指定页面上任何图像容器的大小是更好的做法，因为它允许浏览器继续呈现页面的其余部分并在资源可用时将图像绘制到该区域，而不是强制浏览器推断下载资源并重新渲染整个页面后的大小，但就 CSS 与 HTML 而言，它应该没有区别。

我认为（如果我错了请纠正我）如果您在CSS中指定图像的大小浏览器在渲染页面时不会分配特定的大小，您可以得到加载时内容移动的效果......在什么情况下浏览器必须推断大小？

jsfiddle.net/vPGNQ 好吧，让我们测试一下这个理论。在此示例中，您将看到第一个图像在 HTML IMG 标记中定义其大小，第二个在 CSS 中定义其大小，第三个强制浏览器推断大小（通过定义最大宽度）。前两个将后面的内容放在它所属的位置，但第三个导致文本移动并重新绘制。您可以更改 _= 后的数字以停止缓存图像并强制浏览器重新下载它们。

【参考方案1】：

使用height和width属性的常用方法，仍然需要将整个图像传输到浏览器。

因此，如果您在某处添加链接（图像本身可能是链接），用户仍然可以访问完整的（900 x 900 像素）图像。

关于图像裁剪：您可以使用SO answer 中所述的一些技巧。

JsFiddle Demo 1（图片本身用作原始全尺寸图片的链接）

JsFiddle Demo 2（以第一个演示为基础，但这次裁剪了图像）

【参考方案2】：

最简单的方法是将其用作 div 的背景，然后使用background-sizeattribute。一个例子是我对我的网站所做的。

    <div id="image" 
style="background-image:url(images/Greensburg-Commons-Oblique2.jpg); 
background-position:20% 20%; 
background-size:600px 800px;">

    </div>

使用这种方法，我能够拍摄 3200x2400 的照片并将其缩小到 800x600 的照片。另外，在我看来，用背景照片设计 div 比单纯的图像要容易得多，而且我觉得它做得更多。请注意，background-position 会更改您显示的缩放照片的哪一部分 :)

    <div id="image" 
style="background-image:url(images/Greensburg-Commons-Oblique2.jpg); 
background-size:100% 100%;">

    </div>

此外，您可以将背景大小更改为 100% x 100%，这样背景将始终显示完整图像，并且会随着您的窗口大小或屏幕大小的变化自动缩小 :)。最适合流畅的布局。

【参考方案3】：

你可以将图像设置为 div 的背景，然后设置 background-size 属性

 #yourDiv
   width:100 px;
   height:100 px;
   background:url('path/to/your/image');
   background-size: 100px 100px;
  

您可以为:hover 设置不同的属性，但您需要使用javascript 来更改onclick 的属性

【参考方案4】：

您可以使用lightbox 或仅使用 CSS，但它会调整页面大小。现在这是一个非常简单的例子，所以不要指望一个漂亮的展示。

HTML

<img src="img.png" class="resize">

CSS

.resize 
    width:100px;
    height:100px;


.resize:hover 
    height:900px;
    width:900px;

现在我个人会使用 javascript 或只是一个灯箱。开箱即用，只需进行最少的调整，它看起来就会好得多。只是我的 2 美分。