Image in column squeezed

Hi,

I think it's not normal because columns are re-sized regarding screen size. usually on responsive template a property max-width: 100% is applied on all images to make them responsive. If you don't have it, images have a fixed size, it won't work on small screen.

See attached whet happens with 3 columns usually.

Cheers,

Although it's a long time after TO's problem I have to push this because I have the same problem. And I've found out the cause of this behavior: It happens if you resize pictures and changing any parameter of the image in the picture property dialog (or is it called image property? I'm not using the english version)
An example: I put a picture in my article and resize it by draging it by mouse to 400x300px. In source code there is
width="400" hight="300".
Now doubleclick the picture to start the image property dialog and just click on OK. Now the sourcecode changed to
img style="width:400px; hight:300px;"
It's simply another way to put the size parameter in HTML but the style="... way makes pictures for some reason get squeezed when resizing the browser window.

Is there a way the change the coding?

Hi,

Thanks for the feedback on that. Can you post me here a screenshot of the image settings you told me?
By the way, don't use handles to resize images in your content, you will get images displayed at a non natural dimension witch have the double advantage of being heavy and getting a wrong quality at display. It may also cause problem in the responsive part.

Cheers,

Thank you Tristan for reply, of course I can do some screenshots.

I did a simple example with a picture which has the original size of 800x535px.

1. Resized it by using the handles directly in drop editor (btw. nothing wrong with doing it that way as long as you stay proportional). Lock at the shrinked browser-window, the image is in right ratio and fully responsive. [resized_in_dropedit_by_handles.png]

2. Then I double-clicked picture to open the properties-dialog, changed nothing - only clicked 'OK'. The source code changed as you can see and the same picture in the same shrinked browser-window is shown squeezed and not responsive anymore. [resized_by_properties-dialog.png]

I hope this makes the problem more clearly and helps making DropEditor better (I think DE is the smartest Joomla Editor).

Btw. this is another point, but, would it be possible to get an image-class field in the properties dialog of images? This would make class changes a bit more comfortable.

Regards, Frank

Hi,


OK I think I got it. This is a problem that is from the old image editor tool included in the editor (the image button property only).
We are working on an update version of Droppics that will handle the problem by generating onfly real thumbnails.

About the first consideration about image natural size, it does not change the problem it's just an advice. It slow down your website and it's detected by all SEO tool analysis as an error. Under chrome the handles tool has been removed from the editor.

Cheers,

O.K., this would be a great update.

I used to do this manually with droppics (pro) by generating a custom-sized duplicate. An automatic generated thumbnail would be more comfortable - very much welcomed. My problem with that is, images that are placed in articles with their max. size are looking a bit blurry on high resolution displays. For example, an image of 400x300px placed in an article is looking o.k. on my office monitor with 72 dpi, on a tablet with <200dpi it's looking unsharp (caused by the browser resizing). An image with physical dimensions of 600x448px that has been resized to 400x300px looks much sharper on HiRes displays. Filesizes are a bit bigger - yes, but not that much... For HiRes displays I know no other way to make images look sharp.

Regards, Frank

O.K., this would be a great update.

I used to do this manually with droppics (pro) by generating a custom-sized duplicate. An automatic generated thumbnail would be more comfortable - very much welcomed. My problem with that is, images that are placed in articles with their max. size are looking a bit blurry on high resolution displays. For example, an image of 400x300px placed in an article is looking o.k. on my office monitor with 72 dpi, on a tablet with 200dpi it's looking unsharp (caused by the browser resizing). An image with physical dimensions of 600x448px that has been resized to 400x300px looks much sharper on HiRes displays. Filesizes are a bit bigger - yes, but not that much... For HiRes displays I know no other way to make images look sharp.

Regards, Frank

P.S. Sorry for posting it again, the system cut my text because of using an arrow-Symbol. I will be more careful in my next messages