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

如果要在网页上获得我想要使用的图像的较小版本，但如果用户单击“查看图像”，仍然允许用户查看完整图像，那么最好的方法是什么？这个问题实际上可以分为两部分：

假设我的图像是900x900px：是否有一种方法可以以更小的尺寸显示该图像，比如100x100px（这样浏览器就不必加载整个900px图像），但如果用户单击“查看图像”，则允许用户查看全尺寸图像

---

此外，拍摄900px图像并仅以100px显示的最佳方式是什么？假设我不能用照片编辑软件提前完成这项工作，我应该使用HTML还是CSS中的高度和宽度标签？（看起来它们都调整了图像的大小（缩放），而不是裁剪）。谢谢

您可以将图像设置为div的背景，然后设置

背景大小

属性

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

---

您可以为

设置不同的属性：悬停
，但您需要使用javascript更改属性
onclick
，使用通常的方法使用
高度属性和
宽度属性，整个图像仍然必须传输到浏览器

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

关于图像裁剪：如本文所述，您可以使用一些技巧

（图像本身用作原始全尺寸图像的链接）

（使用第一个演示作为基础，但这次裁剪了图像）
您可以使用或，只使用CSS，但它会调整页面大小。这是一个非常简单的例子，所以不要期待一个漂亮的显示

HTML

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

现在就我个人而言，我会使用javascript或光盒。它在开箱即用的情况下，只要稍加调整，外观就会好得多。只需2美分。
最简单的方法是将其用作div的背景，然后使用
背景大小属性。一个例子就是我对我的网站所做的

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

    </div>

此外，您可以将背景大小更改为100%乘100%，这样背景将始终显示完整图像，并随着窗口大小或屏幕大小的更改自动缩小：）。最适合流体布局。
1）如果不能，则必须存储缩小版和完整版。2） 这不重要，但是CSS会更好，因为如果你创建一个类，它可以在其他页面上重用。我明白了。把我的蛋糕也吃了吧，我不能。所以，这里的要点是html和css中的缩放没有什么区别？正确。更好的做法是指定页面上任何图像容器的大小，因为这将允许浏览器在资源可用时继续渲染页面的其余部分并将图像绘制到该区域中，而不是在下载资源并重新渲染整个页面后强制浏览器推断大小，但尽可能长CSS和HTML，应该没有什么区别。我想（如果我错了，请纠正我），如果你在CSS中指定图像的大小，浏览器在呈现页面时不会分配特定的大小，你可以在加载时获得内容移动的效果……在什么情况下，浏览器必须推断大小？让我们检验一下这个理论。在本例中，您将看到第一个图像在HTML IMG标记中定义其大小，第二个图像在CSS中定义其大小，第三个图像强制浏览器推断大小（通过定义最大宽度）。前两种方法将后面的内容放在它所属的位置，但第三种方法会导致文本移动并重新绘制。您可以在=之后更改数字，以停止图像缓存并强制浏览器重新下载它们。
    <div id="image" 
style="background-image:url(images/Greensburg-Commons-Oblique2.jpg); 
background-position:20% 20%; 
background-size:600px 800px;">

    </div>

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

    </div>