joomla v3.6 article - uploaded image stretches to max

Question

I noticed the above issue when I was composing an article in Joomla. The following is the uploaded image when viewed on a smart phone device which looks fine.

However, the web version looks very stretched.

Ideally, I do not want any re-sizing for desktop version. How do I acheive this? Please help Joomla experts.

Thanks.

Answer 1

You can easily achieve this with some custom css overrides made within your template css styles. Use media queries to adust images width to user's screen size. You may try this code here:

/* For width larger than 400px: */
.your-image-class {
        display: inline-block;
}


/* For width 400px and smaller: */
@media only screen and (max-width: 400px) {
    .your-image-class {
        display: block;
        width: 100%;
    }
}