在 HTML 中裁剪图像的最佳方法是什么?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/519774/
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
What is the best way to crop an image in HTML?
提问by fmsf
What is the best way to crop an image in HTML?
在 HTML 中裁剪图像的最佳方法是什么?
It would be something like the following:
这将类似于以下内容:
<img src="something.gif" x1="10" y1="10" x2="20" y2="20">
If that doesn't work, then I'll just use GIMP. Any thoughts on how I can get this to work programmatically?
如果这不起作用,那么我将只使用 GIMP。关于如何以编程方式使其工作的任何想法?
回答by Georg Sch?lly
That's called sprites, you can read this fantastic article of A List Apart.
这就是所谓的精灵,您可以阅读A List Apart 的这篇精彩文章。
In the end it boils down to:
最后归结为:
#panel2b {
width:50px;
height:30px;
background: transparent url(test-3.jpg) -96px -200px no-repeat;
}
回答by Simon_Weaver
You can also use a tool like this web based CSS Sprite Generatorto create a larger image if you have many slices.
如果你有很多切片,你也可以使用像这个基于 web 的 CSS Sprite Generator 这样的工具来创建更大的图像。
[Someone on my similar questionled me to yours].
[有人在我的类似问题上引导我到你的]。