如何使用 HTML 和/或 CSS 缩小大图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22386346/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to Scale Down a Large Image Using HTML and/or CSS
提问by Startec
What is the best way to get a smaller version of an image I want to use onto a webpage, but still allow the person to view the full image if they click "view image"? This question could really be broken down into two parts:
Say my image is 900x900px: Is there a way I can display that image at a much smaller size, like 100x100px (so that the browser does not have to load the entire 900px image) but allow the person to see full size image if they click "view image"?
Additionally, what is the best way to take the 900px image, and display it at only 100px? Assuming I can't do this ahead of time with photo editing software, should I use the height and width tags in HTML or in CSS? (It seems like they both resize the image (scale) rather than crop). Thanks
获得我想在网页上使用的图像的较小版本的最佳方法是什么，但如果他们单击“查看图像”仍然允许人们查看完整图像？这个问题真的可以分为两部分：
假设我的图像是 900x900 像素：有没有办法以更小的尺寸显示该图像，例如 100x100 像素（这样浏览器不必加载整个 900 像素的图像）但是如果他们单击“查看图像”，是否允许该人查看全尺寸图像？
此外，获取 900 像素图像并仅以 100 像素显示的最佳方法是什么？假设我不能用照片编辑软件提前做这件事，我应该在 HTML 还是 CSS 中使用高度和宽度标签？（似乎他们都调整了图像的大小（比例）而不是裁剪）。谢谢
回答by Philip Allgaier
With the usual approach to use the heightand widthattributes, the whole image still has to be transferred to the browser.
使用height和width属性的通常方法，仍然需要将整个图像传输到浏览器。
So if you add a link somewhere (the image itself could be the link), the user is still able to access the complete (900 x 900 px) image.
因此，如果您在某处添加链接（图像本身可能是链接），用户仍然可以访问完整的 (900 x 900 像素) 图像。
Regarding image cropping: There is some trickery you can use as outlined in this SO answer.
关于图像裁剪：您可以使用一些技巧，如this SO answer中所述。
JsFiddle Demo 1(the image itself is used as a link to the original full-sized image)
JsFiddle Demo 1（图片本身用作原始全尺寸图片的链接）
JsFiddle Demo 2(using the first demo as a base, but this time cropped the image)
JsFiddle Demo 2（以第一个demo为基础，不过这次裁剪了图片）
回答by andrew
well you can set the image as a background of a div and then set the background-sizeproperty
好吧，您可以将图像设置为 div 的背景，然后设置background-size属性
#yourDiv{
width:100 px;
height:100 px;
background:url('path/to/your/image');
background-size: 100px 100px;
}
you could set different properties for :hoverbut you'd need to use javascript to change the properties onclick
您可以为其设置不同的属性，:hover但您需要使用 javascript 来更改属性onclick
回答by Mathew Crogan
Easiest way is to use it as a background to a div and then use the background-sizeattribute. An example would be what I did with my website.
最简单的方法是将其用作 div 的背景，然后使用该background-size属性。一个例子是我对我的网站所做的。
<div id="image"
style="background-image:url(images/Greensburg-Commons-Oblique2.jpg);
background-position:20% 20%;
background-size:600px 800px;">
</div>
Using this method, I was able to take a 3200x2400 photo and scale it down to 800x600 photo. Plus, In my opinion, it's a lot easier to style a div with a background photo than just a plain image and I feel it just does more. Just so you know, background-positionchanges what part of the scaled in photo you show :)
使用这种方法，我能够拍摄一张 3200x2400 的照片并将其缩小到 800x600 的照片。另外，在我看来，使用背景照片设计 div 的样式比单纯的图像要容易得多，而且我觉得它的作用更多。只是让您知道，background-position更改您显示的照片缩放部分:)
<div id="image"
style="background-image:url(images/Greensburg-Commons-Oblique2.jpg);
background-size:100% 100%;">
</div>
Also, you could change the background size to 100% by 100% and that way the background will display the full image all the time and will automatically scale down as your window size changes or screen size :). Best for fluid layouts.
此外，您可以将背景大小更改为 100% 到 100%，这样背景将始终显示完整图像，并会随着您的窗口大小或屏幕大小的变化而自动缩小:)。最适合流体布局。
回答by Brandon Kiefer
You can use a lightboxor with just CSS, but it will resize the page. Now this is a very simple example so don't expect a beautiful display.
您可以使用灯箱或仅使用 CSS，但它会调整页面大小。现在这是一个非常简单的例子，所以不要期望一个漂亮的显示。
HTML
HTML
<img src="img.png" class="resize">
CSS
CSS
.resize {
width:100px;
height:100px;
}
.resize:hover {
height:900px;
width:900px;
}
Now personally I would use a javascript or just a lightbox. It will look much better right out of the box with minimal adjustments. Just my 2 cents.
现在我个人会使用 javascript 或只是一个灯箱。只需最少的调整，开箱即用的效果会更好。只有我的 2 美分。
