Limit media images' caption size to image width

Resolves #3228

diff --git a/com.woltlab.wcf/templates/mediaBBCodeTag.tpl b/com.woltlab.wcf/templates/mediaBBCodeTag.tpl
index 01a0c795410ca43da94f55210bce72cd3f0c668d..975e4bbf55a764940ed46f1f1872122650389439 100644 (file)
--- a/com.woltlab.wcf/templates/mediaBBCodeTag.tpl
+++ b/com.woltlab.wcf/templates/mediaBBCodeTag.tpl
@@ -8,11 +8,13 @@
        
        {if $media->caption}
                <span class="mediaBBCodeCaption">
-                       {if $media->captionEnableHtml}
-                               {@$media->caption}
-                       {else}
-                               {$media->caption}
-                       {/if}
+                       <span class="mediaBBCodeCaptionAlignment">
+                               {if $media->captionEnableHtml}
+                                       {@$media->caption}
+                               {else}
+                                       {$media->caption}
+                               {/if}
+                       </span>
                </span>
        {/if}
 </span>

diff --git a/wcfsetup/install/files/acp/templates/mediaBBCodeTag.tpl b/wcfsetup/install/files/acp/templates/mediaBBCodeTag.tpl
index 01a0c795410ca43da94f55210bce72cd3f0c668d..975e4bbf55a764940ed46f1f1872122650389439 100644 (file)
--- a/wcfsetup/install/files/acp/templates/mediaBBCodeTag.tpl
+++ b/wcfsetup/install/files/acp/templates/mediaBBCodeTag.tpl
@@ -8,11 +8,13 @@
        
        {if $media->caption}
                <span class="mediaBBCodeCaption">
-                       {if $media->captionEnableHtml}
-                               {@$media->caption}
-                       {else}
-                               {$media->caption}
-                       {/if}
+                       <span class="mediaBBCodeCaptionAlignment">
+                               {if $media->captionEnableHtml}
+                                       {@$media->caption}
+                               {else}
+                                       {$media->caption}
+                               {/if}
+                       </span>
                </span>
        {/if}
 </span>

diff --git a/wcfsetup/install/files/style/bbcode/media.scss b/wcfsetup/install/files/style/bbcode/media.scss
index 12baf263c0cc6e7ef0dc68f5b483ad5841b5da3e..af46f1c9feea584dcc729d3abbad4aeb13ca13c2 100644 (file)
--- a/wcfsetup/install/files/style/bbcode/media.scss
+++ b/wcfsetup/install/files/style/bbcode/media.scss
@@ -1,14 +1,22 @@
 .mediaBBCode {
-       display: inline-block;
+       display: table;
        max-width: 100%;
        
        .mediaBBCodeCaption {
                color: $wcfContentDimmedText;
-               display: block;
+               // https://stackoverflow.com/a/11652170/782822
+               display: table-caption;
+               caption-side: bottom;
                margin-top: 5px;
                text-align: center;
                
                @include wcfFontSmall;
+               
+               .mediaBBCodeCaptionAlignment {
+                       // https://stackoverflow.com/a/43627669/782822
+                       display: inline-block;
+                       text-align: justify;
+               }
        }
        
        video {