可缩放元素图像的 CSS 精灵
我有一段包含图像的 html 代码。只需更改图像的大小（宽度和高度），即可在 html 中调整/缩放图像的大小。我想用 CSS Sprites 替换图像（加载单个文件而不是多个文件）。问题是，如果我有一个 div 背景，如果我更改 div 大小，则背景中的图像不会调整大小。
你知道实现它的方法吗？有没有一种方法可以在大多数浏览器上工作，从图像中加载裁剪后的图像部分，然后像处理简单图像一样调整它们的大小？
稍后编辑：图像应仅加载一次，并且应根据客户端大小执行调整大小，以便在将鼠标移动到图像上时为用户提供更好的视图。
I have an html portion of code that contain images. The images can be resized/zoomed in html by simply changing their size (width and height). I want to replace the images with CSS Sprites(to load a single file instead of many). The problem is that if I have a background to a div, if I change the div size the image in the background is not resized.
Do you know a way to achieve it? Is there a way that works on most browsers to load cropped images portions from an image and then to resize them as I would do with a simple image?
Later Edit: The image(s) should be loaded only once and the resize should be performed on client size to provide the user a better view when moves the mouse over image.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
在您的特定用例中，纯 CSS Sprites 不起作用，构建复杂的 javascript 来分割 sprite 图像会比单独加载图像带来更多的开销。
这并不是真正的答案，但您的用例远远超出了 CSS sprites 技术的范围。如果您可以提供更多有关应用程序功能的上下文（即调整大小的目的，调整大小发生在服务器端/客户端等），则可能有其他解决方案可以加快站点的加载速度。
In your specific use case pure CSS Sprites isn't going to work and building complex javascript to chop up the sprite image is going to cause more overhead than just loading the images individually.
Not really an answer but your use case goes way beyond what the CSS sprites technique can do. If you can give some more context as to what your application does (ie. purpose of resizing, is resize happening serverside/clientside, ..etc.) there might be other solutions that will speed up the loading of the site.