html - 使猫头鹰轮播图像响应

Question

我正在尝试让我的猫头鹰轮播响应(在 Bootstrap-3 中)。我用 width:100% 和 height:auto 试过，但没有成功。是否可以让它们响应？

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

.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
}

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

Answer 1

我只是通过将 height:730px 更改为 height:auto 来解决它。就是这样。