屏幕较大时放大图像 bootstrap

Question

我正在尝试使用 bootstrap 3.3.7 和 asp.net 使用 visual studio 2010 制作图像滑块。下面是我的代码：

.ImageSlide {
  width: 100%;
  height: 350px;
  max-height: 350px;
}

<div id="myCarousel" class="carousel slide" data-ride="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>
  </ol>
  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active ">
      <img class="ImageSlide" src="../Images/Image (1).jpg" alt="Image 2" />
      <div class="carousel-caption">
        <h3>
          Image 1</h3>
        <p>
          This is the first image.</p>
      </div>
    </div>
    <div class="item ">
      <img class="ImageSlide" src="../Images/Image (2).jpg" alt="Image 2" />
      <div class="carousel-caption">
        <h3>
          Image 2</h3>
        <p>
          This is the second image.</p>
      </div>
    </div>

  </div>

  <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only"> Previous</span>
  </a>
  <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

现在我正尝试在 class 项的每个 div 中制作图像以显示在孔 div 中。我希望在屏幕较大时像所做的那样放大图像 here （请单击蓝色按钮 "full width" 并更改浏览器大小以理解我的意思）。 Class ImageSlide 正在显示孔项目中的图像，并且完全按照我的需要固定高度。但在这种情况下，当屏幕太大时，图像会被拉伸。怎样才能让它在孔项中同时放大显示？

Answer 1

您可以将 background-image 与 background-size : cover 一起使用：https://jsfiddle.net/3nb5d13u/3/

这是我更改的内容：

CSS :

.ImageSlide1
{
    background-image : url('yourbackground.jpg');
    background-size : cover;
    background-position: center;
}

HTML :

<div class="item active ">
   <div class="ImageSlide1" ></div>
   <div class="carousel-caption">
      <h3>Image 1</h3>
      <p>This is the first image.</p>
   </div>
</div>

屏幕较大时放大图像 bootstrap

Zoom in image when screen is larger bootstrap

css

image

slider

zooming

twitter-bootstrap