Insert image dialog, entering 'n%' distorts the image

[Joel]

Duplicate by trying to insert an image, then setting the width to 100%. It immediately distorts the image proportions. Lock ratio on or off makes no difference. If I try to fix it by removing the height, the Preview displays the image with it's original height, instead of empty as expected (see attached screenshot).

If '%' is input it could simply clear the height completely and let the browser do the scaling of the image in the preview box. Then the user can input a custom height % if they so wish to do. If I try to remove the preview image height CSS rule in Inspector the image scales beautifully so I'd think that easy fix would work.

Replicated in IE 9 and Chrome 26.

Please see comment:2 for detailed description.

[Joel]

Shows how the image input dialog width/height is incorrect

[Jakub Ś]

If I try to fix it by removing the height, the Preview displays the image with its original height, instead of empty as expected

This part is correct. No size in boxes means img original size. You would have to set 0 to get "empty" image.

If I try to remove the preview image height CSS rule in Inspector the image scales beautifully

But this is how it works. What you insert in these fields gets inserted in style attribute. Perhaps this could be solution for Webkit height 100%.

@req you ticket looks a little bit like #9759. Is this what you are getting? I was only able to see this in Webkit while other browsers seem to work fine. Could you comment on this?

[Joel]

Replying to j.swiderski:

If I try to fix it by removing the height, the Preview displays the image with its original height, instead of empty as expected

This part is correct. No size in boxes means img original size. You would have to set 0 to get "empty" image.

I meant that when width input is "50%" and height input is empty, then the actual preview element has style="width: 50%; height: 768px;" - is that expected as well? Because that really does not work like I want it to, which is to have style="width: 50%;".

If I try to remove the preview image height CSS rule in Inspector the image scales beautifully

But this is how it works. What you insert in these fields gets inserted in style attribute. Perhaps this could be solution for Webkit height 100%.

Not in this case, when I want the image to have a width but no height.

@req you ticket looks a little bit like #9759. Is this what you are getting? I was only able to see this in Webkit while other browsers seem to work fine. Could you comment on this?

Indeed it looks similar, but I'd say it's a little different. I am able to reproduce my problem in Chrome, IE8, IE9 and Firefox 19. My problem comes earlier on in the image input pase than the one in that issue as well.

Reproduce steps in ​http://ckeditor.com/demo with IE 8 and IE 9. Steps:

1. Go to Demo and clear the editor
2. Click image icon to start dialog
3. Click browser server
4. Select a large image
5. Erase the value in width (height clears as expected)
6. Input 100% to width

--> image gets distorted, height still shows a px amount (75 for 4:3 image) Expected height to either automatically be cleared empty (like I think is logical) or to have its value copied from width.

7. Erase 75 from height field

--> image gets much more distorted. Expected preview to be: style="width: 100%;" -- Preview actually is: style="width: 50%; height: 768px;".

8. Insert image as is; inserted image actually now contains style="width:100%" as expected, but the preview was wrong.

This could be fixed by if a very simple check in the image width input's keyup event handler; if width input gets a value that contains "%", instead of calculating a new value to height, copy the width field value OR clear the height value. Clearing the value would be much better in my opinion, because the width is not n% of the original image, but rather n% of the parent element - and it's extremely rare to have set-height elements at least for me.

[Jakub Ś]

Thanks for clarifications.

1. #9759 is separate issue
2. I agree with you (after little consultation with my colleagues). When an e.g width is entered in % then height should be cleared as well. When percentages are used we switch off ratio thus it might be good idea to clear other dimension as well. Your ideas make a lot of sense.

and it's extremely rare to have set-height elements at least for me.

Please note it is recommended to enter both width and height - ​http://www.w3schools.com/tags/att_img_width.asp but this doesn't change fact that we should delete other value when % is inserted.

Problem can be reproduced in all browsers from CKEditor 3.0 in both CKE 3.x and 4.x.

[Joel]

Excellent, thanks a lot!

Please note it is recommended to enter both width and height - ​http://www.w3schools.com/tags/att_img_width.asp but this doesn't change fact that we should delete other value when % is inserted.

I think it depends on the situation. I think that for percentages it would be best to avoid height because it often distorts the image; see example at ​http://dabblet.com/gist/5627121 - the second image example is good and the third is distorted.

Even if the container doesn't have a height set, the img height still distorts: ​http://dabblet.com/gist/5627140 . If the images are inserted just like <body><p><img ..></p></body> it doesn't really matter for the end result.

The benefit w3schools talks about is not significant for percentage values because the browser can't really reserve the required space; it still has to calculate it from the parent elements and available space. (My opinion and also I'm biased againgst w3schools :))

[Joel]

This is still an issue, is there any clue when this might get an update?