Images in comments are extremely distorted

Hi Ralph,

Can you please provide a URL where we can see the issue? We’ll be happy to take a closer look and see what you may be able to do to resolve the issue.

Regards,

Emilio Rivera
WPtouch Support

Hi Emilio,

thanks for getting in touch with me. Try this one:

https://www.zonebattler.net/2009/04/09/kunst-um-die-ecke/

All images are in landscape format (500 x 375 px). The four photos in the article itself are shown perfectly correct in WPtouch’s mobile view, but the many, many similar images further down in the comments are distorted and shown in portrait format dimensions. At least on my Android smartphone in both the stock browser and Chrome. Can you reproduce this?

Thanks,
Ralph

looks like there is a width given as a %, but height as an absolute…the images are fine in landscape, squished vertically in portrait…check ur css on those images;-)

vielen grussen als northern virginia, the _new_ dominion;-)

Well, it must be an issue of WPtouch then since my HTML snippets for inserting images in my blog are always the same (I don’t use the WordPress gallery there) and they have always absolute dimensions specified:

<div align="center">
<img src="https://www.zonebattler.net/wp-content/uploads/2017/03/filename.jpg" width="500" height="375" alt="..." title="..." />
</div>

I use this HTML code both in posts and in comments since 12 years and it works of course flawlessly in any regular browser on this planet (and probably beyond). The main suspect responsible for the issue reported continues to be WPtouch, I’m afraid…

Greetings,
Ralph

• This reply was modified 7 years, 8 months ago by zonebattler.
• This reply was modified 7 years, 8 months ago by zonebattler.
• This reply was modified 7 years, 8 months ago by bdbrown.

if you inspect the offending image (i use safari’s web inspector) you will see that wptouch sets max-width:

@media all {
    .comment .comment-body img {
        max-width:100%;
    }
}

to make sure any image fits on the screen…a reasonable expectation;-) the distortion is due to your specifying _both_ h & w, an unecessary overconstraint.

simply remove the height spec (or both, as your images are 500×375 anyway) & let wpt handle mobile sizing for u;-)

Thanks for the explanation. However, I still can’t see why WPtouch has no problem at all in handling my valid HTML code in postings, but not in comments. If it is possible to make the plugin interprete HTML code correctly in posts, it should be possible to interprete the identical (!) code as intended in comments as well.

“Simply removing the height spec” is no option, since right now my blog holds some 4356 images in 2618 posts and 10869 comments. Even with a risky global search & replace operation, I just couldn’t do that due to many different image dimensions involved (it is sheer coincidence that all pictures in the example given are of the same size).

u don’t grok css, do u? comment images r specifically given max-width.
and u obviously don’t grok regex, as sed s/height=[0-9]*//g should do the trick.
but if u can’t bear to fix ur code, try
.comment .comment-body img { max-width:unset!important; }
in custom css, but don’t bitch about images not fitting…or better yet:
img { height:unset!important;}

• This reply was modified 7 years, 8 months ago by airdrummer.

Thanks for pointing out my deficiencies and providing a well working css trick. This topic may be closed.

@airdrummer,

Thank you for providing CSS @zonebattler can use to adjust his/her images. Unfortunately, unset isn’t supported IE, Android or Opera (mobile versions). The height property should also work and has better browser compatibility. Also, it didn’t sound like he was complaining, it was a legitimate question. These are community forums and we do appreciate you and other users helping each other, but it would be great if you would refrain from using unfriendly language.

@zonebattler,

You can try:

.comment .comment-body img {height: auto !important;}

You won’t see a difference, but mobile visitors using Android browser, Internet Explorer and Opera Mobile should also see the images scaled correctly.

Here are some relevant resources if you’d like to read further:
https://developer.mozilla.org/en-US/docs/Web/CSS/height
https://developer.mozilla.org/en-US/docs/Web/CSS/unset

Regards,

Emilio Rivera
WPtouch Support

Thanks, Emilio,

I switched from “unset” to “auto” to ensure maximum browser compatibility.

Greetings,
Ralph