如何在boostrap转盘上正确调整图像大小 [英] How to resize images properly on boostrap carousel
本文介绍了如何在boostrap转盘上正确调整图像大小的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我无法将这些图片剪下来以适合转盘。我认为这一行需要进行编辑：
IGNORE：
它告诉我添加更多的细节，以便通过输入额外的东西来传递它，就像一个坏人会采取简单的出路，而不是添加实际的信息，而是一些bs，不增加任何价值的职位
I cannot get these images chopped down to fit properly in the carousel. I think this line needs to be edited somehow:
IGNORE: It is telling me to add more detail so im typing extra things to by pass it like a bad person would take the easy way out and not add actual info but rather some bs that adds no value to the post
继承人我书写的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
</head>
<body>
<style>
h1{
color: aqua;
font-size: 40px;
text-align: center;
font-style: italic;
}
</style>
<!-- this creates the menu -->
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Mason Cox</a>
</div>
<ul class="nav navbar-nav">
<li><a href="Cox_Mason_jumbotron.html">Jumbotron</a></li>
<li class="active"><a href="Cox_Mason_carousel.html">Carousel</a></li>
<li><a href="Cox_Mason_responsive_table.html">Table</a></li>
</ul>
</div>
</nav>
<!--this is the heading-->
<h1>Mason Cox</h1>
<!--this is the carousel-->
<div class="container">
<h2>Friends and I Carousel</h2>
<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>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
<li data-target="#myCarousel" data-slide-to="4"></li>
<li data-target="#myCarousel" data-slide-to="5"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="leahandi.jpg" alt="dance" style="width:75%;"
style="height:25%;">
<div class="carousel-caption">
<h3>My girlfriend and I at a dance.</h3>
</div>
</div>
<div class="item">
<img src="padre.png" alt="padre" style="width:100%;">
<div class="carousel-caption">
<h3>Friends and I at a bar in South Padre</h3>
</div>
</div>
<div class="item">
<img src="homepage.PNG" alt="oldpic" style="width:100%;">
<div class="carousel-caption">
<h3>A picture of me frshman year</h3>
</div>
</div>
<div class="item">
<img src="tailgate.jpg" alt="tailgate" style="width:100%;">
<div class="carousel-caption">
<h3>My girlfriend and I at a tailgate.</h3>
</div>
</div>
<div class="item">
<img src="me.PNG" alt="topgolf" style="width:100%;">
<div class="carousel-caption">
<h3>A picture of me at Top Golf</h3>
</div>
</div>
<div class="item">
<img src="friends.JPG" alt="friend group" style="width:100%;">
<div class="carousel-caption">
<h3>A picture of friends and I from last year</h3>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</body>
</html>
- < li data-target =＃myCarouseldata-slide-to =0class =active>< / li>
< li data-target =＃myCarouseldata-slide-to =1>< / li>
< li data-target =＃myCarouseldata-slide-to =2>< / li>
< li data-target =＃myCarouseldata-slide-to =3>< / li>
< li data-target =＃myCarouseldata-slide-to =4>< / li>
< li data-target =＃myCarouseldata-slide-to =5>< / li>
< / ol>
<！ - 幻灯片包装 - >
< div class =carousel-inner>
< div class =item active>
style =height：25％;>
< div class =carousel-caption>
< h3>我的女朋友和我一起跳舞。< / h3>
< / div>
< / div>
< div class =item>
< img src =padre.pngalt =padrestyle =width：100％;>
< div class =carousel-caption>
< h3>我和朋友在南帕德里的酒吧< / h3>
< / div>
< / div>
< div class =item>
< img src =homepage.PNGalt =oldpicstyle =width：100％;>
< div class =carousel-caption>
< h3>我frshman年的图片< / h3>
< / div>
< / div>
< div class =item>
< img src =tailgate.jpgalt =tailgatestyle =width：100％;>
< div class =carousel-caption>
< h3>我的女朋友和我在后门。< / h3>
< / div>
< / div>
< div class =item>
< img src =me.PNGalt =topgolfstyle =width：100％;>
< div class =carousel-caption>
< h3> Top Golf< / h3>
< / div>
< / div>
< div class =item>
< img src =friends.JPGalt =朋友组style =width：100％;>
< div class =carousel-caption>
< h3>去年朋友和我的照片< / h3>
< / div>
< / div>
< / div>
<！ - 左右控制 - >
< a class =left carousel-controlhref =＃myCarouseldata-slide =prev>
< span class =glyphicon glyphicon-chevron-left>< / span>
< span class =sr-only>上一个< / span>
< / a>
< a class =right carousel-controlhref =＃myCarouseldata-slide =next>
< span class =glyphicon glyphicon-chevron-right>< / span>
< span class =sr-only>下一步< / span>
< / a>
< / div>
< / div>
< / body>
< / html>
推荐答案
以下是 JS小提琴使用来自各种来源的测试图像，这些图像具有不同的尺寸，但是它们在转盘内正确匹配。这是你在找什么？
相关代码更改：
Relevant code changes:
div.carousel div.item > img {
width: 100%;
height: 300px;
}
如果你拿出上面的CSS，你会看到轮播图像内的大小。通过将高度限制为300px，是的，较大图片可能看起来很模糊，但非常适合旋转木马。
If you take the above CSS out, you'll see how the carousel takes the size of the images within. By restricting the height to 300px, yes, the large images might seem blurry but pretty much good enough to fit within the carousel.
让我知道这是否有帮助。如果不是的话，如果你可以提供图片，那也不错。
Let me know if this helps. If not, it'd be nice if you could provide the images as well.
IGNORE：与图片对应的图片说明。没有意义。
IGNORE: image caption corresponding to the image. Makes NO sense.
希望这能起作用。 :)
Hope this works. :)
这篇关于如何在boostrap转盘上正确调整图像大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
