Carousel banner aspect ratio distorted on mobile device

1

Greetings.

Carousel banners are automatically resized on mobile platforms, which is good, but the aspect ratio is distorted, which is bad.

Carousel settings ask for banner width and height in pixels; ideally I'd specify width in percent of the frame and then height would be dynamic, always in proportion to actual width.

Have you sen this problem before? Any suggestions, please?
Here's the website: http://www.ufrgs.br/ppgsr

Versions:
Plone 4.3.3 (4308)
CMF 2.2.7
Zope 2.13.22
Python 2.7.6 (default, Nov 13 2014, 17:38:35) [GCC 4.4.7 20120313 (Red Hat 4.4.7-11)]
PIL 2.3.0 (Pillow)

Thanks,
-FGN.

2

You can use javascript:

https://github.com/collective/collective.multitheme/blob/master/src/collective/multitheme/theme/fragments/slider.pt#L44-L47

( replace ${height} with your height in percentage

UPDATE: You need to fix your CSS, all images are 'potentially distorted', I think you should add:

img {
height: auto;
}

3

As a side note, are you aware your site's theme does not work at all for someone with javascript disabled?

themeless
themeless.jpg800×442 30.8 KB

The slider not working makes sense... but the whole theme seems a bit odd!

4

Thanks for your feedback

This particular theme is mandated by the university.
So I didn't want to replace the theme, only adapt it.

Do you have any ideas on how to implement
your suggestions with the least change, please?

Looking at the page source code I see the following:

<script type="text/javascript" charset="utf-8">
    (function ($) {
        $('#carousel-3158699117').ploneCarousel({
            height: 332,
            width: 1048,
            transition: 'slide',
            speed: 500,
            delay: 8000
        });
    })(jQuery);

I've also found the following snippet in style.less:
(http://www.ufrgs.br/ppgsr/++theme++ppgsr/static/style.less)

/*** carousel ****/

    .carousel{clear:both; margin: 2% auto;}

    .carousel-banners,
    .carousel-slider,
    .carousel-banner {
        max-width: 100% !important;
        border-radius: 8px;
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
        margin: 0 auto;
    }

    .carousel-image img {
        max-width:100%;
        width: auto;
    }

I'd appreciate any advice on where to insert the resizing function.

Thanks,
-FGN.