如何使用HTML和/或CSS缩放较大的图像

如何获取较小版本的图像我想用于网页，但仍然允许用户查看完整图像“看图”？这个问题真的可以分为两部分：

假设我的图像是900x900px：有没有一种方法可以以更小的尺寸显示该图像，例如100x100px（这样浏览器无需加载整个900px图像），但允许该人看到全尺寸的图像，如果他们点击“查看图像”？

此外，采取900px图像并以100px显示它的最佳方式是什么？假设我无法提前做照片编辑软件，我应该使用HTML还是CSS中的高度和宽度标签？（看起来他们都调整了图像（比例）而不是裁剪）。由于如何使用HTML和/或CSS缩放较大的图像

来源

2014-03-13 Startec

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

我明白了。吃我的蛋糕，也吃我不能。所以，这里的要点是，在HTML和CSS中缩放之间几乎没有什么区别？ – Startec

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

通过使用height和width属性的常用方法，整个图像仍然必须传输到浏览器。

所以，如果你添加一个链接的地方（图像本身可能是链接），用户仍然能够访问完整的（900×900像素）图像。

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

JsFiddle Demo 1（图像本身被用作链接到原始大图）

JsFiddle Demo 2（使用第一演示为基地，但这次裁剪图像）

来源

2014-03-13 17:33:53

聪明。感谢这些例子。 – Startec

那么你可以设置图像作为一个DIV的背景，然后设置background-size属性

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

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

来源

2014-03-13 17:33:06 andrew

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

HTML

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

CSS

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

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

现在，我个人会使用JavaScript或只是一个灯箱。只需进行最小限度的调整，它的外观看起来会更好。只是我2美分。

来源

2014-03-13 17:37:33

最简单的方法是使用它作为div的背景，然后使用background-size属性。我的网站就是一个例子。

<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％变更为100％，这样的背景都会显示完整的图像时间和自动缩小，因为你的窗口大小变化或屏幕大小:)。最适合流体布局。

来源

2015-10-20 13:50:06

如何使用HTML和/或CSS缩放较大的图像

回答

相关问题