Question

我使用drupal bootstrap创建了一个旋转木马幻灯片图像。幻灯片正常工作。我添加了3张图片。每张图片大约是1000x750。我想对这些图像进行设置，使它们在响应设备中看起来更好。我喜欢在幻灯片中看到部分图像，即使原始尺寸为1000x750。下面是我能解释的最好的，因为我有点困惑。

当我访问幻灯片时，图像看起来很大。当我使屏幕响应时，图像看起来不正确。我还没有应用任何CSS。我想将css应用于图像，因此它们看起来很专业，因为我使屏幕响应。我可能会让你困惑。所以我分享了一个链接。

如果您访问此链接，您会注意到原始图像比实际幻灯片图像大。此外，幻灯片显示图像仅显示原始图像的一部分。这正是我想要做的。

sample link

我的代码。

<div class="view view-views-slideshow-home-page">

    <div class="view-content">
      <div id="views-bootstrap-carousel-1" class="views-bootstrap-carousel-plugin-style carousel slide">
      <!-- Carousel indicators -->
    <ol class="carousel-indicators">
              <li data-target="#views-bootstrap-carousel-1" data-slide-to="0" class=""></li>
              <li data-target="#views-bootstrap-carousel-1" data-slide-to="1" class="active"></li>
          </ol>

  <!-- Carousel items -->
  <div class="carousel-inner">
          <div class="item">
        <img typeof="foaf:Image" class="img-responsive" src = "/sites/default/files/insu.jpg" width="1000" height="667" alt="">
      </div>
          <div class="item active">
        <img typeof="foaf:Image" class="img-responsive" src="/sites/default/files/ins.jpg" width="1000" height="667" alt="">
      </div>
      </div>

      <!-- Carousel navigation -->
    <a class="carousel-control left" href="#views-bootstrap-carousel-1" data-slide="prev">
      <span class="icon-prev"></span>
    </a>
    <a class="carousel-control right" href="#views-bootstrap-carousel-1" data-slide="next">
      <span class="icon-next"></span>
    </a>
  </div>
    </div>


</div>

如何将css应用于图像和包装器，以便图像看起来响应和专业？

如何设置幻灯片图像的样式

0 个答案: