CODEWITHSUNDEEP
cssheightresponseslideshowaspect-ratio
Stamoulohta
Stamoulohta

Reputation: 659

responsive slideshow with set aspect ratio

I am trying to create a simple slideshow with Jquery but I am messing up my height attribute for the container. I need the height to be "auto" because I would like to keep the aspect ratio stable when resizing. here is an example of my code, thanks!

<!DOCTYPE html>
<html lang="en-US" dir="ltr"
    <head>
        <meta charset="UTF-8">
        <title>test</title>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js?ver=3.4.1"></script>
        <script type="text/javascript">
            var jq = jQuery.noConflict();
            var i = 0;
            var slides = ["#slide_2", "#slide_1"];
            var imgSrc = new Array(2);
            imgSrc[0] = "banner1.png"
            imgSrc[1] = "banner2.png"
            jq(document).ready(slideShow);

            function slideShow(){
                slides.reverse();
                jq(slides[0]).attr("src", imgSrc[i]);
                jq(slides[0]).fadeIn(1000);
                jq(slides[1]).fadeOut(1000);
                setTimeout("slideShow()", 5000);
                i = (++i >= imgSrc.length)? 0: i;
            }
        </script>
        <style type="text/css">
            .slide {
                position:absolute;
            }
        </style>
    </head>
    <body style="background:#a9a9a9;">
        <headder id="branding" role="banner" style="display:block; background:#d0d0d0; width:100%; height:auto;">
            <h1>Example</h1>
            <div id="slideshow">
                <img id="slide_1" class="slide" src="banner1.png"/>
                <img id="slide_2" class="slide"/>
            </div> <!-- #slideshow -->
        </headder>
        <div id="main">
            <p>Lorem ipsum eu usu assum liberavisse, ut munere praesent complectitur mea. Sit an option maiorum principes. Ne per probo magna idque, est veniam exerci appareat no. Sit at amet propriae intellegebat, natum iusto forensibus duo ut. Pro hinc aperiri fabulas ut, probo tractatos euripidis an vis, ignota oblique ut nec. Ad ius munere soluta deterruisset, quot veri id vim, te vel bonorum ornatus persequeris. Pro hinc aperiri fabulas ut, probo tractatos euripidis an vis, ignota oblique ut nec. Ad ius munere soluta deterruisset, quot veri id vim, te vel bonorum ornatus persequeris.</p>
        </div> <!-- #main -->
        <footer id="last" role="contentinfo" style="background:#3c3c3c;">
            <p style="color:#f9f8f0;">test site</p>
        </footer>
    </body>
</html>

Upvotes: 1

Views: 882

Answers (2)

Stamoulohta
Stamoulohta

Reputation: 659

thanks for your responses! In my case what finally worked was to wrap all my images over another empty jpg(700bytes) image with the same resolution as my slides and position:relative.. it's faster and lighter than javascript, scales with the window and is totally respectful to the "flow" of the document.

note: to create an empty jpg with custom dimension you can find the 0xFFC0 marker in the header. The 3nd and 4rd byte after it is the y dimension and the 5rth and 6th is the x.

Cheers ;)

Upvotes: 1

Satya Teja
Satya Teja

Reputation: 616

Here you can wrap all your images with a div or any tag and apply some fixed height to that div. in this way it will not affect aspect ratio of your image

Upvotes: 0

Related Questions