- From: Tommy Hodgins via GitHub <sysbot+gh@w3.org>
- Date: Fri, 11 Aug 2017 14:25:34 +0000
- To: public-css-archive@w3.org
So what I noticed about the area element and image maps was that they're all based on pixels for their coordinates. Because of this, it's _really tough_ to scale or resize an image map and still have the coordinates line up - but I found a way to do it! If you have an HTML element with a set width and height (like an image + map combo) and you wrap that in a wrapper element you can use `transform: scale();` to resize the image and map while respecting their pixel-based coordinates! It requires knowledge of the current `offsetWidth` of the wrapper element, then you're able to determine the correct `scale()` by dividing the current width of the wrapper by the original width of the thing you're scaling. Here's a blog post about the technique, with a video and code examples: https://codepen.io/tomhodgins/post/how-to-make-any-html-element-scalable And here's the technique implemented 4 different ways: https://codepen.io/tomhodgins/pen/wqBYLb -- GitHub Notification of comment by tomhodgins Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/1618#issuecomment-321827682 using your GitHub account
Received on Friday, 11 August 2017 14:31:37 UTC