I think there are multiple issues you might be battling with....
using setAttribute('style'....
you may be over-writing the style if you set it twice, it should be one
statement like this:
document.querySelector('img[width="600"]').setAttribute('style', 'width:
50%;height: auto;');
You can also unset the other attributes... I think you can use this:
elm.removeAttribute('width');
elm.removeAttribute('height');
of course then you may loose the way that you selected them... also I am
not sure if querySelector will return more than the first matching node,
but you can save a reference to it and use it even after you unset
attributes:
var elm=document.querySelector('img[width="600"]');
elm.removeAttribute('width');
elm.setAttribute('style','width:auto;');
You only need important if you need to over-ride css of greater precedence.
http://www.w3.org/TR/CSS2/cascade.html#specificity
You only need set width or height, and the other should be auto since
otherwise you may distort the image.
The web browser seems to handle rounding to whole pixel values when using
percent size values it seems, however I am not sure if it will maintain
aspect ratio when doing so, so it is probably best to set only one, but I
could be wrong.
On Sun, Jul 7, 2013 at 1:43 AM, Ben Stover <[email protected]> wrote:
> On certain webpages I have embedded images with a spec like:
>
> <img width="640" height="405" src="/.....">
>
> I want to reduce the dimensions of this picture to
>
> <img width="320" height="203" src="/.....">
>
> In order to achieve this I added the following statements to a
> corresponding GM script:
>
> document.querySelector('img[width="600"]').setAttribute('style', 'width:
> 50%;');
> document.querySelector('img[height="405"]').setAttribute('style', 'height:
> 50%;');
>
> The problem is that only the first statement seems to be applied. This is
> bad because the picture is distorted then.
> How can I shrink both width AND height?
>
> Can I merge the first and the second statement into ONE?
>
> Is the odd original height value a problem for GM/CSS renderer? Actually
> the result of 50% of 405 would be 202.5
> which is afaik not a valid height value. Is it auto-rounded?
>
> Isn't it necessary to add an "!important" tag somewhere in the
> setAttribute() command?
>
> Ben
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
> --
> You received this message because you are subscribed to the Google Groups
> "greasemonkey-users" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to [email protected].
> To post to this group, send email to [email protected].
> Visit this group at http://groups.google.com/group/greasemonkey-users.
> For more options, visit https://groups.google.com/groups/opt_out.
>
>
>
--
You received this message because you are subscribed to the Google Groups
"greasemonkey-users" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/greasemonkey-users.
For more options, visit https://groups.google.com/groups/opt_out.
