scale

Responsive Image Hover - CSS/JQuery

一曲冷凌霜 提交于 2020-01-11 13:51:06
问题 I followed this tutorial (http://mattbango.com/notebook/code/hover-zoom-effect-with-jquery-and-css/) and built out a image-hover plugin that I'd like to use on my site. The only problem I have is that I want it to work responsively, scaling the images according to my 960gs. Here's the fiddle I have so far: http://jsfiddle.net/Ak94R/6/ .viewport { float: left; height: 360px; margin: 0 9px 9px 0; overflow: hidden; position: relative; width: 360px; } Instead of shrinking that image from 730px

How can I hide a meta tag from the devices with max width:1024px?

隐身守侯 提交于 2020-01-11 13:22:10
问题 I tried the below, but it didnt work. Can you help me please? <div class="viewport-setting"><meta name="viewport" content="maximum-scale=0.80"></div> <style>@media (min-width: 0px) and (max-width: 1024px) {.viewport-setting {display:none !important;}}</style> 来源: https://stackoverflow.com/questions/43764920/how-can-i-hide-a-meta-tag-from-the-devices-with-max-width1024px

How can I hide a meta tag from the devices with max width:1024px?

天涯浪子 提交于 2020-01-11 13:22:08
问题 I tried the below, but it didnt work. Can you help me please? <div class="viewport-setting"><meta name="viewport" content="maximum-scale=0.80"></div> <style>@media (min-width: 0px) and (max-width: 1024px) {.viewport-setting {display:none !important;}}</style> 来源: https://stackoverflow.com/questions/43764920/how-can-i-hide-a-meta-tag-from-the-devices-with-max-width1024px

How to scale from left to right only

烈酒焚心 提交于 2020-01-11 09:44:06
问题 This is my css code body { transform: scaleX(0.67); } In this my entire website shrink both from right and left.but i need only scale from left how can i do this 回答1: I believe the transform-origin can be helpful here: body { transform:scale(0.67); transform-origin:left center; } 回答2: You add transform-origin which define from which position the transform should occur. Its default value is center center ( 50% 50% ) and you need left center ( 0 50% ) body { transform: scaleX(0.67); transform

Javascript Canvas : Apply zoom at given coordinates

非 Y 不嫁゛ 提交于 2020-01-11 04:58:07
问题 I'm struggling with an implementation of canvas zooming (on mouse wheel), using Vanilla Javascript, without success. The zoom must be applied on the coordinates of the mouse, when the wheel is rolled. It's been asked here before, but my situation is quite different, considering I can't use canvasContext.translate , and the values of offsetX and offsetY must be kept in its absolute representation (not scaled) I would really appreciate some light. In the following snippet, I provide my current

css scaled background image

我只是一个虾纸丫 提交于 2020-01-11 03:19:27
问题 i can get images scaled to fill the window when they are the content, like so: (without any html5 or div) <style type="text/css"> img { width:100%; height:100%; margin:0px; } </style> and <img src="wacard.png" alt="original image" title=""> but this fails (both "html, body" and just "body") <style type="text/css"> body { width:100%; height:100%; margin:0px; } </style> and <body style="background-image: url(wacard.png);"> </body> as picked up picked up from here: Resize HTML5 canvas to fit

css3 scale transform on parent div but keeping constant size in some of the associated divs

别等时光非礼了梦想. 提交于 2020-01-10 14:08:07
问题 I'm using css3 scale transform to scale a div that contains other divs inside. The problem I have is that some of the inner divs I need to keep as they were, basically as if they were not scaled, their size should not change, however I do need to scale the parent div with everything else inside. How can you reverse the scaling in some of the divs? I am trying to apply an inverse scaling. If the overall div had applied a value of 1.5 , I'm trying to find what value I should now scale the other

How to get scale works cross-browser in center position on SVG elements with CSS

对着背影说爱祢 提交于 2020-01-07 06:15:54
问题 I have some SVG elements, which should be scaled on hover (see the attached code snippet below please). It works well on WebKit browsers (adding transform-origin: 50% 50%; to g element did the job). But Firefox seems to scale it in own way (like need to get some extra translate(x,y) and Edge doesn't scale it at all. What are your suggestions? Am I doing it wrong or should use a separate styling for different browser engines? I would like to solve it with CSS however, this is just an example.

How to get scale works cross-browser in center position on SVG elements with CSS

南楼画角 提交于 2020-01-07 06:15:35
问题 I have some SVG elements, which should be scaled on hover (see the attached code snippet below please). It works well on WebKit browsers (adding transform-origin: 50% 50%; to g element did the job). But Firefox seems to scale it in own way (like need to get some extra translate(x,y) and Edge doesn't scale it at all. What are your suggestions? Am I doing it wrong or should use a separate styling for different browser engines? I would like to solve it with CSS however, this is just an example.

Android Canvas ScaleFocus causing jumping position

寵の児 提交于 2020-01-06 20:08:59
问题 I am working on a game that will be looking down onto a grid moving pieces around (similar to Chess). I want the user to be able to pan and zoom the map. I have been making transformations to a matrix, and then concatenating those changes to the canvas matrix. While it's mostly working, I have a weird bug: After the initial scale, if I pinch to scale again, the screen jumps (it's as if a swiped somewhere else and it moved there instantly) and then scales smoothly. I have narrowed this