屏幕较大时放大图像引导程序答案

【问题标题】：Zoom in image when screen is larger bootstrap屏幕较大时放大图像引导程序
【发布时间】：2017-04-26 09:59:09
【问题描述】：

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

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

现在我正在尝试使类项目的每个 div 中的图像显示在孔 div 中。我想在屏幕很大时放大图像，就像here 所做的一样（请单击蓝色按钮“全宽”并更改浏览器大小以理解我的意思）。 ImageSlide 类在孔项中显示图像，并完全按照我的需要固定高度。但是在这种情况下，当屏幕太大时，图像会被拉伸。如何让它在孔项中同时放大和显示？

【问题讨论】：

你可以使用background-image和background-size : cover，这里有一个例子jsfiddle.net/3nb5d13u/3
谢谢@PascalGoldbach 先生
不客气，如果我的评论对您有帮助，我也会将其发布为答案

标签： css image twitter-bootstrap slider zooming

【解决方案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>

【讨论】：