CSS Bootstrap 轮播调整图像大小

Bootstrap carousel resizing image

提问by Jake B

Hi I am trying to make a carousel on my wordpress website with bootstrap. I would like to put four block links next to it. I have the blocks there and the images are scrolling fine, However I believe the carousel is changing the height of the image.

嗨，我正在尝试使用引导程序在我的 wordpress 网站上制作轮播。我想在它旁边放四个块链接。我在那里有块，图像滚动得很好，但是我相信轮播正在改变图像的高度。

I have images (640 x 360) and I made the 4 blocks 90 pixels high. I did this so the blocks would be flush with the bottom of the carousel. Except the blocks are too big. I don't understand what the problem could be. And I have searched through all of the CSS.

我有图像（640 x 360），我将 4 个块设为 90 像素高。我这样做是为了让积木与旋转木马的底部齐平。除了块太大。我不明白可能是什么问题。我已经搜索了所有的 CSS。

Here is my code:

这是我的代码：

<!--==========================================-->
<!-- 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>

回答by LegendaryAks

The reason why your image is resizing which is because it is fluid. You have two ways to do it:

您的图像调整大小的原因是因为它是流动的。你有两种方法可以做到：

1. Either give a fixed dimension to your image using CSS like:

   .carousel-inner > .item > img {
     width:640px;
     height:360px;
   }

2. A second way to can do this:

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

1. 要么使用 CSS 为您的图像提供固定尺寸，例如：

   .carousel-inner > .item > img {
     width:640px;
     height:360px;
   }

2. 第二种方法可以做到这一点：

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

回答by Alex Z

add this to your css:

将此添加到您的CSS：

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

回答by Nilkamal Gotarne

I had the same problem. You have to use all the images with same height and width. you can simply change it using paint application from windows using the resize option in the home section and then use CSS to resize the image. Maybe this problem occurs because the the width and height attribute inside the tag is not responding.

我有同样的问题。您必须使用具有相同高度和宽度的所有图像。您可以使用主页部分中的调整大小选项使用 Windows 中的绘画应用程序简单地更改它，然后使用 CSS 调整图像大小。出现这个问题可能是因为标签内的宽度和高度属性没有响应。

回答by saeed ahmed

Put the following code into head section in your web page programming.

将以下代码放入网页编程的 head 部分。

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

回答by Adarsh Tiwari

Give class img-fluidto your divcarousel-item.Finally it will be:

给img-fluid你的课程divcarousel-item。最后它将是：

<div class="carousel-item active img-fluid">
      <img class="d-block w-100" src="path to image" alt="First slide">
</div>

回答by Randall Moore

Put the following code in your CSS, this works with Bootstrap 4:

将以下代码放入您的 CSS 中，这适用于 Bootstrap 4：

.w-100 {
  width: 100% !important;
  height: 75vh;
}

回答by user13447197

Had the same problem and none of the CSS solutions presented here worked.

遇到了同样的问题，这里介绍的 CSS 解决方案都没有奏效。

What worked for me was setting up a height="360" without setting any width. My photos aren't the same size and like this they have room to adjust their with but keep the height fixed.

对我有用的是设置 height="360" 而不设置任何宽度。我的照片大小不一样，像这样他们有空间调整他们的照片，但保持高度固定。

回答by sangram parmar

replace your image tag with

用

<img src="http://localhost:6054/wp-content/themes/BLANK-Theme/images/material/images.jpg" alt="the-buzz-img3"  style="width:640px;height:360px" />

use style attribute and make sure there is no css class for image which set image height and width

使用 style 属性并确保没有用于设置图像高度和宽度的图像的 css 类

回答by akshay_sushir

Use this code to set height of the image slider to the full screen / upto 100 view port height. This will helpful when using bootstrap carousel theme slider. I face some issue with height the i use following classes to set image width 100% & height 100vh.

使用此代码将图像滑块的高度设置为全屏/最多 100 个视口高度。这在使用 bootstrap carousel 主题滑块时会很有帮助。我在使用以下类设置图像宽度 100% 和高度 100vh 时遇到了一些高度问题。

<img class="d-block w-100" src="" alt="" >use this class in image tags & write following css code in style tags or style.css file

<img class="d-block w-100" src="" alt="" >在图像标签中使用此类并在样式标签或 style.css 文件中编写以下 css 代码

.carousel-inner > .carousel-item > img {
  height: 100vh;
}

回答by emmanuel

i had this issue years back..but I got this. All you need to do is set the width and the height of the image to whatever you want..what i mean is your image in your carousel inner ...don't add the style attribut like "style:"(no not this) but something like this and make sure your codes ar correct its gonna work...Good luck

几年前我有这个问题......但我得到了这个。您需要做的就是将图像的宽度和高度设置为您想要的任何值。 ) 但类似这样的事情，并确保你的代码正确，它会工作......祝你好运