Load an article that have an image in it.

Could you please describe the steps where (editor, introimage, fullimage) and how you inserted the image.

What you describe is expected behavior and the code responsible for it hasn't been touched for years. See https://github.com/joomla/joomla-cms/blob/staging/media/system/js/caption-uncompressed.js. It could certainly be improved though. Although JCaption is going away in 4.0 anyways.

Load an article that have an image in it.

Could you please describe the steps where (editor, introimage, fullimage) and how you inserted the image.

The images are inserted using 'Images and links'.

What you describe is expected behavior and the code responsible for it hasn't been touched for years. See https://github.com/joomla/joomla-cms/blob/staging/media/system/js/caption-uncompressed.js. It could certainly be improved though. Although JCaption is going away in 4.0 anyways.

Ok, I understand, but the reality is that Joomla 3.9.3 started to break responsive images.

I run a news site that has been working flawlessly for almost two years now, but after upgrading to 3.9.3 images started to not be responsive any longer.

Check this page as an example. (https://ksu.no/artikler/ksu-no/95930-skattebetalere-meldte-seg-med-6-milliarder-i-glemte-formuer) – resize the browser window and you'll see that other elements on the page overlap the image because it does not scale.

Then try this.

• Right-click the image and select 'Inspect'.
• Select the div above the img tag
• Disable 'width' setting (see screenshot)
• With dev tool open and width disabled you will get normal behavior eg. responsive images.

I just know that I never used JCaption for image captions but overrides with figure and figcaption HTML. I never used it because of the issue you describe above. Doesn't react dynamically on windows resize. Thus I think SkarkyKZ is right.

The code adding the width didn't changed in the last years. So the version before should behave exactly the same, except someone modified the core.

You may can fix your problem by add

.img_caption {
  max-width: 100%
}

to your css file in your template.

I just know that I never used JCaption for image captions but overrides with figure and figcaption HTML. I never used it because of the issue you describe above. Doesn't react dynamically on windows resize. Thus I think SkarkyKZ is right.

Sounds like this should be modified in the core then. Why use technology that obviously have been broken for years.

The images are inserted using 'Images and links'.

I recommend to use JLayout - Overrides for full_image and introimage similiar like Joomla4 does it (figure and figcaption):
https://github.com/joomla/joomla-cms/blob/4.0.0-alpha6/layouts/joomla/content/full_image.php
https://github.com/joomla/joomla-cms/blob/4.0.0-alpha6/layouts/joomla/content/intro_image.php

Then you have full control via CSS.

Why use technology that obviously have been broken for years.

Provide a pr or you have to wait for a volunteer.

Sounds like this should be modified in the core then. Why use technology that obviously have been broken for years.

As explained before, this is expected behavior. Nothing is broken. Why wasn't it working as expected on your site until 3.9.3 update is a different question.

You can override this by placing a modified caption.js script in your template's js/system/ directory.

As explained before, this is expected behavior. Nothing is broken. Why wasn't it working as expected on your site until 3.9.3 update is a different question.

Well, "broken". A car could have square wheels – technically it is not broken, but it'll give you one hell of a bumpy ride. :)

You can override this by placing a modified caption.js script in your template's js/system/ directory.

I'm really not a programmer, and I should not try to even think I could fix this.

Yes, it's somewhat outdated but changing it would break expected styling on existing sites. Some would consider this B/C break, in which case it should be done in 4.0. And it is already accomplished by removing the script completely.

I'm really not a programmer, and I should not try to even think I could fix this.

This can be done by removing two lines from source script (caption-uncompressed.js) containing the word "width" and saving the script to js/system/caption.js file in your template's directory. Here's the minified version in case you want to use it on your site:

var JCaption=function(_selector){var $,selector,initialize=function(_selector){$=jQuery.noConflict();selector=_selector;$(selector).each(function(index,el){createCaption(el)})},createCaption=function(element){var $el=$(element),caption=$el.attr('title'),align=$el.attr("align")||$el.css("float")||element.style.styleFloat||"none",$p=$('<p/>',{"text":caption,"class":selector.replace('.','_')}),$container=$('<div/>',{"class":selector.replace('.','_')+" "+align,"css":{"float":align}});$el.before($container);$container.append($el);if(caption!==""){$container.append($p)}};initialize(_selector)};

I just had the same issue and found a workaround - so I am updating this in case it is ever useful to anyone else.

The issue I was having was that the JCaption code is taking the image width and applying it to the <div class="image-caption" style="width: ***px;"> tag without adding any horizontal margin / values. I also suspect that the <div class="image-caption" style="width: ***px;"> should copy the image display attribute which for responsive pages is likely to be display="inline-block" as without this the div will be display="block" which won't be responsive.

I had already wrapped my img tag in an <a style="display: inline-block;"> tag, so all I needed to do was to override the width style with css. The CSS I think you therefore need is as follows:

.img_caption {
    display: inline-block;
    width: auto !important;
}