引导旋转木马宽度100%和响应

Bootstrap carousel width 100% and responsive

本文关键字:100% 响应 旋转木马      更新时间:2023-09-26

我在我的页面上有一个旋转盘,但是当我使图像宽度100%时,它们似乎不适合在横幅内,它们似乎被拉伸了。我的图片是2000px * 550px,我想让它们填充横幅并保持这个比例。

目前他们是100%,但他们似乎拉伸和太高在750px

我相信这是一个css问题?虽然我不确定引导代码的哪一部分我需要改变。似乎有什么东西迫使图像像这样调整大小。

(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>

在设计图像时,你会得到很多。计算出旋转木马的宽高比,然后围绕这个宽高比设计图像。然后你可以使图像宽度:100%;或者max-width: 100%;

我会计算出你愿意使用的最大尺寸,比如1920px然后使用下面的CSS:

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

这与使用

完全相同
width: 100%;
max-width: 1920px;

无论你的方法是什么,请确保在编写任何代码之前计划好创意的长宽比和大小。

图片的自然尺寸是1650x650px。当它们在我的显示器上渲染时,它们被缩放到1920x750px。所以他们很紧张:)尝试使用更高分辨率的图像。宽度至少1920px