Bootstrap 轮播图像调整大小 [英] Bootstrap Carousel Image Resizing

查看：209
本文介绍了Bootstrap 轮播图像调整大小的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在为一个我开始工作的网站使用引导程序，我添加了一个轮播，但它不断调整我的图像大小以向左对齐并缩小很多，但我不知道为什么.这是现在的样子

<div id="homePageCarousel" class = "轮播幻灯片"><ol class = "carousel-indicators"><li data-target="#homePageCarousel" data-slide-to="0" class="active"></li><li data-target="#homePageCarousel" data-slide-to="1"></li><li data-target="#homePageCarousel" data-slide-to="2"></li></ol><div class="carousel-inner"><div class="item active"><img src="Images/paper1.jpg" alt="paper1" class="img-responsive"><div class="carousel-caption"><h3>StudentShare</h3><p>点击图片了解更多！</p>

<div class="item"><img src="Images/sunset.jpg" alt="sunset" class="img-responsive"><div class="carousel-caption"><h3>另一个广告</h3><p>此广告的描述</p>

<div class="item"><img src="Images/paper2.jpg" alt="paper2" class="img-responsive"><div class="carousel-caption"><h3>另一个广告</h3><p>此广告的描述</p>

<a class="carousel-control right" href="#homePageCarousel" data-slide="next"><span class="icon-next"></span></a><a class="carousel-control left" href="#homePageCarousel" data-slide="prev"><span class="icon-prev"></span></a>

<!-- jQuery(Bootstrap 的 JavaScript 插件所必需的)--><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"><!-- 包含所有已编译的插件(如下)，或根据需要包含单个文件 --><script src="js/bootstrap.min.js"></script>

解决方案

你是否要求这样的东西 jsBin Demo

我将 max-width: 100% 改为 width:100% 以使用所有宽度

I'm using bootstrap for a website I started working on, and I added a carousel, but it keeps re-sizing my images to be aligned to the left and a lot smaller but I can't figure out why. This is what it looks like right now

<body>

<div id="homePageCarousel" class = "carousel slide">

<ol class = "carousel-indicators">
<li data-target="#homePageCarousel" data-slide-to="0" class="active"></li>
<li data-target="#homePageCarousel" data-slide-to="1"></li>
<li data-target="#homePageCarousel" data-slide-to="2"></li>
</ol>

<div class="carousel-inner">
<div class="item active">
  <img src="Images/paper1.jpg" alt="paper1" class="img-responsive">
  <div class="carousel-caption">
    <h3>StudentShare</h3>
    <p>Click the picture to learn more!</p>
  </div>
</div>
<div class="item">
  <img src="Images/sunset.jpg" alt="sunset" class="img-responsive">
  <div class="carousel-caption">
    <h3>Another Ad</h3>
    <p>Description of this Ad</p>
  </div>
</div>
<div class="item">
  <img src="Images/paper2.jpg" alt="paper2" class="img-responsive">
  <div class="carousel-caption">
    <h3>Another Ad</h3>
    <p>Description of this Ad</p>
  </div>
</div>
</div>

<a class="carousel-control right" href="#homePageCarousel" data-slide="next">
<span class="icon-next"></span>
</a>
<a class="carousel-control left" href="#homePageCarousel" data-slide="prev">
<span class="icon-prev"></span>
</a>

</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">                      </script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>

解决方案

Do you asking for something like this jsBin Demo

I changed max-width: 100% to width:100% to use all width

这篇关于Bootstrap 轮播图像调整大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

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