Bootstrap旋转木马大小调整图像
您好,我正在尝试使用bootstrap在我的WordPress网站上制作轮播。我想将四个块链接放在它旁边。我有块,图像滚动正常,但我相信旋转木马正在改变图像的高度。Bootstrap旋转木马大小调整图像
我有图像(640 x 360),我做了4块90像素高。我做到了这一点,所以块会与旋转木马的底部齐平。除了块太大。我不明白这个问题会是什么。我已经搜遍了所有的CSS。
这里是我的代码:
<!--==========================================-->
<!-- Carousel -->
<!--==========================================-->
<div>
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<!--Carousel item 1-->
<div class="item active">
<img src="http://localhost:6054/wp-content/themes/BLANK-Theme/images/material/ej-manuel.png" alt="buffalo-skyline" width="640" height="360" />
<div class="carousel-caption">
<h4>First Thumbnail label</h4>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
</div>
<!--Carousel item 2-->
<div class="item">
<img src="http://localhost:6054/wp-content/themes/BLANK-Theme/images/material/image3.jpg" width="640" height="360" />
<div class="carousel-caption">
<h4>Second Thumbnail label</h4>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
</div>
<!--Carousel item 3-->
<div class="item">
<img src="http://localhost:6054/wp-content/themes/BLANK-Theme/images/material/images.jpg" alt="the-buzz-img3" width="640" height="360" >
<div class="carousel-caption">
<h4>Third Thumbnail label</h4>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
</div>
</div>
<!--==========================================-->
<!-- Side Buttons -->
<!--==========================================-->
<div>
<ul class="nav nav-tabs nav-stacked">
<li><a style="background-color: #051223; color: #fff; height: 90px; width: 210px;">Story 1</a></li>
<li><a style="background-color: #051223; color: #fff; height: 90px; width: 210px;">Story 1</a></li>
<li><a style="background-color: #051223; color: #fff; height: 90px; width: 210px;">Story 4</a></li>
<li><a style="background-color: #051223; color: #fff; height: 90px; width: 210px;">Story 5</a></li>
</ul>
</div>
您的图片大小调整的原因是因为它很流畅。使用CSS像
-
要么给一个固定的层面,你的形象:你有两种方法可以做到这
.carousel-inner > .item > img { width:640px; height:360px; }
-
的第二种方式可以做到这一点:
.carousel { width:640px; height:360px; }
我试过一切改变图像,内联样式,CSS表单, –
可以给你的代码的小提琴链接,以帮助我更好地了解 – LegendaryAks
请确保您的css更新建议由@LegendaryAks引导后css – Lereveme
与
<img src="http://localhost:6054/wp-content/themes/BLANK-Theme/images/material/images.jpg" alt="the-buzz-img3" style="width:640px;height:360px" />
使用样式属性更换你的图像标签,并确保不存在用于设置图像的高度和宽度图像无CSS类
谢谢你你的帮助,但我不知道它的工作:(我改变了图像标签后,我进入了Firefox的风格编辑器,但没有影响旋转木马图像的大小。 –
我有同样的问题。您必须使用具有相同高度和宽度的所有图像。您可以使用home部分中的resize选项在窗口中使用绘图应用程序来更改它,然后使用CSS调整图像大小。也许会发生此问题,因为标记内的宽度和高度属性没有响应。
将下面的代码放到网页编程的head部分。
<head>
<style>.carousel-inner > .item > img { width:100%; height:570px; } </style>
</head>
其中是截图? – Denish
哎呀对不起一秒 –
我不知道为什么它不会让我插入immage,但继承人的链接:https://skydrive.live.com/redir?resid=D203695F94A1B7D7!5932&authkey=!AO4YGCcca1rFx_8 –