如何完全适合旋转木马内的图像(Bootstrap) [英] How to fully fit an image inside carousel(Bootstrap)

查看：27
本文介绍了如何完全适合旋转木马内的图像(Bootstrap)的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我制作了一个功能齐全的轮播，但问题是在轮播的右侧出现了白色块.我想摆脱它.请帮忙.

<div class="item active"><img src="Jellyfish.jpg" alt="图像"><div class="carousel-caption"><h2>这是标题</h2><p>这是段落</p>

<div class="item"><img src="Koala.jpg" alt="图片"><div class="carousel-caption"><h2 style="color:orange">这是标题</h2><p>这是段落</p>

<div class="item"><img src="企鹅.jpg" alt="图片"><div class="carousel-caption"><h2>这是标题</h2><p>这是段落</p>

<a href="#caro" class="left carousel-control" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a><a href="#caro" class="right carousel-control" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>

解决方案

设置图片width:100%

.item img {宽度:100%}

这是演示:https://jsfiddle.net/u9kkdLzb/

I have made a fully functional carousel but the problem is that on the right side of carousel white block is appearing. I want to ged rid of that. Please help.

<div class="carousel-inner">
  <div class="item active">
    <img src="Jellyfish.jpg" alt="image">
    <div class="carousel-caption">
      <h2>This is the heading</h2>
      <p>This is paragraph</p>
    </div>
  </div>
  <div class="item">
    <img src="Koala.jpg" alt="image">
    <div class="carousel-caption">
      <h2 style="color:orange">This is the heading</h2>
      <p>This is paragraph</p>
    </div>
  </div>
  <div class="item">
    <img src="Penguins.jpg" alt="image">
    <div class="carousel-caption">
      <h2>This is the heading</h2>
      <p>This is paragraph</p>
    </div>
  </div>
    <a href="#caro" class="left carousel-control" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a href="#caro" class="right carousel-control" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
</div>

解决方案

Set Image width:100%

.item img {
  width:100%
}

Here is Demo: https://jsfiddle.net/u9kkdLzb/

这篇关于如何完全适合旋转木马内的图像(Bootstrap)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆