0

I have a carousel on my page, but when i make the images width 100% they don't seem to sit properly within the banner, they seem stretched. My images are 2000px by 550px and i want them to fill the banner and respond down keeping this ratio.

At the moment they are 100% but they seem stretched and too tall at 750px

I believe this is a css issue? although i'm not sure what part of the bootstrap code i'd need to change. There seems to be something that is forcing the image to resize like this. 

(function($) {
    $.fn.InitBanner = function(opts) {
        var config = $.extend({}, {
            'data' : []
        }, opts);

        function Init(obj) {
            if( config.data.length > 0 ) {
                AddItems(obj);   
            } else {
                console.error("Please specify the data json");   
            }
        }

        function AddItems(obj) {

            var htmlstring = '';
            var json = config.data;

            for( var i = 0; i < json.length; i++ ) {

                if( i === 0 ) htmlstring += '<div class="item active">';
                else htmlstring += '<div class="item">';

                htmlstring += '<a href="' + json[i].url + '"><img src="' + json[i].imageUrl + '"></a>';

                if( json[i].tags !== null ) {
                    for( var j = 0; j < json[i].tags.length; j++ ) {
                        if( json[i].tags[j].toLowerCase() === 'caption' ) {
                            htmlstring += '<div class="carousel-caption hidden-sm hidden-xs">';
                            htmlstring += '<h3>' + json[i].title + '</h3>';
                            htmlstring += '<p>' + json[i].leader + '</p>';
                            htmlstring += '</div>';

                            break;
                        }
                    }
                }

                htmlstring += '</div>';
            }

            obj.find('.carousel-inner').html(htmlstring);
        }

        // initialize every element
        this.each(function() {
            Init($(this));
        });

        return this;
    };
})(jQuery);
.row {
    margin-left: -15px;
    margin-right: -15px;
}
.carousel {
    position: relative;
}
.carousel-inner {
    position: relative;
    overflow: hidden;
    width: 100%;
}
.carousel-inner>.item>img, .carousel-inner>.item>a>img {
    width: 100%;
}
.carousel-inner>.item>img, .carousel-inner>.item>a>img {
    line-height: 1;
}
.img-responsive, .thumbnail>img, .thumbnail a>img, .carousel-inner>.item>img, .carousel-inner>.item>a>img {
    display: block;
    max-width: 100%;
    height: auto;
}
img {
    vertical-align: middle;
}
img {
    border: 0;
}

@media not all, (-webkit-transform-3d)
.carousel-inner>.item {
    transition: transform .6s ease-in-out;
    backface-visibility: hidden;
    perspective: 1000;
}

.carousel-inner>.item {
    display: none;
    position: relative;
    -webkit-transition: .6s ease-in-out left;
    -o-transition: .6s ease-in-out left;
    transition: .6s ease-in-out left;
    -webkit-transition: 0.6s ease-in-out left;
    -moz-transition: 0.6s ease-in-out left;
    -o-transition: 0.6s ease-in-out left;
    transition: 0.6s ease-in-out left;
}
@media not all, (-webkit-transform-3d)
.carousel-inner>.item.next.left, .carousel-inner>.item.prev.right, .carousel-inner>.item.active {
    transform: translate3d(0, 0, 0);
    /* left: 0; */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
    <div class="carousel slide" id="bannerFrontPage">
        
        <div class="carousel-inner">
          <div class="item"><a href="https://www.gkunions.co.uk/freshers/"><img src="/asset/News/7328/Freshers-GKU-Webbanner.png?thumbnail_width=1650&amp;thumbnail_height=650&amp;resize_type=CropToFit"></a></div>
          <div class="item active"><a href="http://www.gkunions.co.uk/studenthub/"><img src="/asset/News/7328/hub.png?thumbnail_width=1650&amp;thumbnail_height=650&amp;resize_type=CropToFit"></a></div>
          <div class="item"><a href="news/article/7328/Employability-Fair/"><img src="/asset/News/7328/Employability-fair-banner_GKU-Website.jpg?thumbnail_width=1650&amp;thumbnail_height=650&amp;resize_type=CropToFit"></a></div>
          <div class="item"><a href="news/article/7328/Team-Medway/"><img src="/asset/News/7328/gku-banner-4.jpg?thumbnail_width=1650&amp;thumbnail_height=650&amp;resize_type=CropToFit"></a></div>
          <div class="item"><a href="http://www.gkunions.co.uk/clickandcollect/"><img src="/asset/News/7328/cc2000.png?thumbnail_width=1650&amp;thumbnail_height=650&amp;resize_type=CropToFit"></a></div>
          <div class="item"><a href="http://www.gkunions.co.uk/pageassets/whoarewe/impactreport2015/2015_GKU_impact-report_Spread_web.pdf"><img src="/asset/News/7328/Impact-web-banner_gku.png?thumbnail_width=1650&amp;thumbnail_height=650&amp;resize_type=CropToFit"></a></div>
      </div>
        
        <a class="left carousel-control" data-slide="prev" href="#bannerFrontPage"><span class="sr-only">Previous</span> </a> <a class="right carousel-control" data-slide="next" href="#bannerFrontPage"> <span class="sr-only">Next</span> </a>
    </div>
</div>
user2953989
  • 2,791
  • 10
  • 36
  • 49

2 Answers2

1

You'd get allot out of designing images for their intended purpose. Figure out the aspect ratio of that carousel and then design images around that aspect ratio. You can then make the images either width: 100%; or max-width: 100%;

I'd figure out the maximum size that you'r willing to go to, say 1920px and then use the following CSS:

width: 1920px;
max-width: 100%;

This is exactly the same as using:

width: 100%;
max-width: 1920px;

Whatever your approach will be, make sure you plan the aspect ratio and size of your creatives before you write any code.

Tom
  • 2,543
  • 3
  • 21
  • 42
0

Natural sizes of your images are 1650x650px. When they are render on my monitor they are scaled to 1920x750px. So they are streched :) Try using higher resolution images. At least 1920px in width.

Rafał R
  • 241
  • 2
  • 10