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>

来源

2013-06-28 Jake B

其中是截图？ – Denish

哎呀对不起一秒 –

我不知道为什么它不会让我插入immage，但继承人的链接：https://skydrive.live.com/redir?resid=D203695F94A1B7D7!5932&authkey=!AO4YGCcca1rFx_8 –

您的图片大小调整的原因是因为它很流畅。使用CSS像

要么给一个固定的层面，你的形象：你有两种方法可以做到这
```
.carousel-inner > .item > img { 
    width:640px; 
    height:360px; 
}
```

的第二种方式可以做到这一点：

.carousel { 
    width:640px; 
    height:360px; 
}

来源

2013-06-28 05:12:13 LegendaryAks

我试过一切改变图像，内联样式，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类

来源

2013-06-28 04:57:43

谢谢你你的帮助，但我不知道它的工作:(我改变了图像标签后，我进入了Firefox的风格编辑器，但没有影响旋转木马图像的大小。 –

将此内容添加到您的css：

.carousel-inner > .item > img, .carousel-inner > .item > a > img { 
    width: 100%; 
}

来源

2014-06-20 11:02:05

这对我有效： – Soferio

解决了Firefox 37.0.2和IE 11中的问题。 – hdlopes

我可以确认@ hdlopes的评论。这让我对Firefox变得疯狂。谢谢！ – Nikola

我有同样的问题。您必须使用具有相同高度和宽度的所有图像。您可以使用home部分中的resize选项在窗口中使用绘图应用程序来更改它，然后使用CSS调整图像大小。也许会发生此问题，因为标记内的宽度和高度属性没有响应。

来源

2016-10-30 18:57:49

将下面的代码放到网页编程的head部分。

<head> 
    <style>.carousel-inner > .item > img { width:100%; height:570px; } </style> 
</head>

来源

2017-02-25 20:21:52

Bootstrap旋转木马大小调整图像

回答

相关问题