如何保持滑块尺寸相同的图像？

Question

我在bootstrap中写了一个滑块。下面是在移动设备上看到的大屏幕v / s上的图像比较。

笔记本电脑屏幕：

移动屏幕：

移动屏幕中的结果显示图像上没有文字，图像大小不适合滑块。我怎么能像在笔记本电脑屏幕上看到的那样适合图像。

以下是滑块的代码：

<!-- slider -->
              <div id="myCarousel" class="carousel slide" data-interval="3000" data-ride="carousel">
              <!-- Carousel indicators -->
                <ol class="carousel-indicators">
                    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                    <li data-target="#myCarousel" data-slide-to="1"></li>
                    <li data-target="#myCarousel" data-slide-to="2"></li>
                    <li data-target="#myCarousel" data-slide-to="3"></li>
                </ol>   
               <!-- Carousel items -->
                <div class="carousel-inner">
                      <div class="active item">
                          <img src='./images/charity11.jpg' class='img1' />
                          <div class="carousel-caption">
                            <h3 class='title'>Let Us All Come Together</h3>
                            <em class='subtext'>"..and be a blessing to someone else."</em>
                          </div>
                      </div>
                      <div class="item">
                          <img src='./images/child2.jpg' class='img1' />>
                          <div class="carousel-caption">
                            <h3 class='title'>Education is the vaccine for violence</h3>
                            <em class='subtext'>"..and love, the poet said, is woman's whole existence."</em>
                          </div>
                      </div>
                      <div class="item">
                          <img src='./images/tree.jpg' class='img1' />
                          <div class="carousel-caption">
                            <h3 class='title'>Lend a hand to save trees</h3>
                            <em class='subtext'>"..let the green be seen."</em>
                          </div>
                      </div>
                      <div class="item">
                          <img src='./images/dr1.jpg' class='img1' />
                          <div class="carousel-caption">
                          </div>
                      </div>
                </div>

                <!-- Carousel nav -->
                <a class="carousel-control left" href="#myCarousel" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left"></span>
                </a>
                <a class="carousel-control right" href="#myCarousel" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right"></span>
                </a>
            </div>
            <!-- slider ends -->

Css：

.item{
background: #333;    
text-align: center;
height: 420px !important;
}

Answer 1

似乎滑块在屏幕上缩放它的宽度，但高度不会改变，因为项目类具有恒定的高度。

也许@media查询可以解决问题吗？

Answer 2

尝试提供height:auto/inherit，使其与carousel-inner属性相匹配。您无法定义height: 420px !important;并期望在其他维度屏幕中使用相同类型的行为，您应该使用Media Queries更多信息here