Question

我试图让我的猫头鹰旋转木马响应（在Bootstrap-3中）。我尝试了宽度：100％和高度：自动，但没有成功。是否有可能让他们做出回应？

我只在这里发布相关代码。

＆＃13;

.container-carousel {
	width:100%
}


#main-slider .carousel .slider-img {
    text-align:right;
    position:absolute
}

#main-slider .carousel .item {
    background-position:50%;
    background-repeat:no-repeat;
    background-size:cover;
    left:0!important;
    opacity:0;
    top:0;
    position:absolute;
    width:100%;
    display:block!important;
    height:730px;
	margin-bottom:20px;
    -webkit-transition:opacity ease-in-out 500ms;
    -moz-transition:opacity ease-in-out 500ms;
    -o-transition:opacity ease-in-out 500ms;
    transition:opacity ease-in-out 500ms
}

#main-slider .carousel .item:first-child {
    top:auto;
    position:relative
}

#main-slider .carousel .item.active {
    opacity:1;
    -webkit-transition:opacity ease-in-out 500ms;
    -moz-transition:opacity ease-in-out 500ms;
    -o-transition:opacity ease-in-out 500ms;
    transition:opacity ease-in-out 500ms;
    z-index:1
}

#main-slider .prev,#main-slider .next {
    position:absolute;
    top:50%;
    background-color:#c52d2f;
    color:#fff;
    display:inline-block;
    margin-top:-25px;
    height:40px;
    line-height:40px;
    width:40px;
    line-height:40px;
    text-align:center;
    border-radius:0;
    z-index:5
}

#main-slider .active .animation.animated-item-1 {
    -webkit-animation:fadeInUp 300ms linear 300ms both;
    -moz-animation:fadeInUp 300ms linear 300ms both;
    -o-animation:fadeInUp 300ms linear 300ms both;
    -ms-animation:fadeInUp 300ms linear 300ms both;
    animation:fadeInUp 300ms linear 300ms both;
    background:#fff;
    background:rgba(255,255,255,.7)
}

#main-slider .active .animation.animated-item-2 {
    -webkit-animation:fadeInUp 300ms linear 600ms both;
    -moz-animation:fadeInUp 300ms linear 600ms both;
    -o-animation:fadeInUp 300ms linear 600ms both;
    -ms-animation:fadeInUp 300ms linear 600ms both;
    animation:fadeInUp 300ms linear 600ms both
}

＆＃13;

<div class="container-carousel">
<section id="main-slider" class="root-sec scroll-section no-margin">
        <div class="carousel slide">
            <ol class="carousel-indicators">
                <li data-target="#main-slider" data-slide-to="0" class="active"></li>
                <li data-target="#main-slider" data-slide-to="1"></li>
                <li data-target="#main-slider" data-slide-to="2"></li>
				<li data-target="#main-slider" data-slide-to="3"></li>
                <li data-target="#main-slider" data-slide-to="4"></li>
				<li data-target="#main-slider" data-slide-to="5"></li>
            </ol>
            <div class="carousel-inner">

				<div class="item active" style="background-image: url1>
                    <div class="container">
                        

				<div class="item" style="background-image: url2>
                   <div class="container">

				<div class="item" style="background-image: url3>
                    <div class="container">
                     

				<div class="item" style="background-image: url4>
                    <div class="container">

＆＃13;

Answer 1

我只是通过改变高度来解决它：730px到height：auto。就是这样。

Answer 2

您应该使用JavaScript来获取屏幕宽度，然后使用它来确定图像宽度：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">

<script>

$(function(){

var screenWidth = screen.width; //get the screen width in pixels
var pixelsPerPercentage = screenWidth*.01; //get the pixels per percentage
var imageWidthInPer = 50; //set the variable of the width of the image in percentages
var imageWidthInPix = imageWidthInPer*pixelsPerPercentage; //set the variable of the width of the image in pixels

$(#+"image").width(imageWidth+"px"); //set the width of the image in pixels

});

</script>

使猫头鹰旋转木马图像响应

2 个答案: