V8-3163

ot_templating/Resources/Private/Templates/Content/Carousel.html

@@ -22,7 +22,6 @@
 
             <flux:field.input name="width" eval="trim" default="600" label="LLL:EXT:ot_templating/Resources/Private/Language/locallang.xlf:width_in_pixels"/>
             <flux:field.input name="height" eval="trim" default="400" label="LLL:EXT:ot_templating/Resources/Private/Language/locallang.xlf:height_in_pixels"/>
-            <flux:field.checkbox name="crop" label="LLL:EXT:ot_templating/Resources/Private/Language/locallang.xlf:crop_large_images" default="0"/>
 
             <flux:field.inline.fal name="images" minItems="2" maxItems="24"/>
 
@@ -53,18 +52,18 @@
     <f:section name="Main">
 
         <div class="center-carousel">
-            <div class="carousel" style="max-width:{width}px; max-height:{height}px">
+            <div class="carousel" style="max-width:{width}px; max-height:{height}px;">
                 <f:for each="{v:content.resources.fal(field: 'images', record: '{record}')}"
                        as="image"
                        iteration="iterator">
-                    <div style="height: {height}px">
+                    <div style="display: flex;flex-direction: row;justify-content: center;align-items: center;height:100%;width:{width}px;height:{height}px;">
                         <f:image treatIdAsReference="1"
                                  src="{image.id}"
                                  title="{image.title}"
                                  alt="{image.alternative}"
                                  class="carousel-img"
-                                 width="{width}"
-                                 maxHeight="{height}{f:if(condition: crop, then: 'c')}"
+                                 height="{height}"
+                                 style="max-width:{width}px;max-height:{height}px;width:auto;height:auto;"
                         />
                     </div>
                 </f:for>