引导轮播中图像尺寸未调整

Question

我想在“我的作品”部分中使用旋转木马滚动浏览不同图片，作为作品集网站的一部分。 我正在使用Bootstrap网格系统将作品分为两列：一列用于图像，一列用于对作品的描述。 HTML如下所示：

`

<div class="container" id="work-container">
        <div class="row">
            <div class="col image-container" id="qc-image">

            <img style="width: 30rem;" src="./assets/img/image.png">

            </div>
            <div class="col">

                <h2 style="color: #000000; text-align: center;">Name Of Project</h2>

            </div>

        </div>


    </div>

第一列中的图像是屏幕截图。 我想要做的是制作轮播类型的效果，该效果可以让用户单击图像底部的圆圈并滚动浏览屏幕快照的不同图像，以作为一种预览，但是事实证明，在这种情况下，调整自举轮播的尺寸很难这样做。

我为轮播幻灯片强加了以下代码，认为它可以工作，但是图像的大小就是您期望的全尺寸轮播图像的大小。 我将其设置为100％，以为它可以匹配col的宽度，但是那没有用。

<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>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner">
    <div class="item active">
      <img src="la.jpg" alt="Los Angeles">
    </div>

    <div class="item">
      <img src="chicago.jpg" alt="Chicago">
    </div>

    <div class="item">
      <img src="ny.jpg" alt="New York">
    </div>
  </div>

有人能够阐明如何有效地做到这一点吗？ 我接受这样的想法，即引导轮播不是执行我要尝试执行的操作的最佳方法，但是我不确定要从那里开始，也许是Node.js？

Answer 1

使用它来分配图像和内容，并根据您的要求调整col-md- *值，然后为图像分配宽度100％

<div class="item">
  <div class="row">
    <div class="col-md-*">
      <img src="chicago.jpg" alt="Chicago">
    </div>
    <div class="col-md-*">
      <h2> content </h2>
    </div>
  </div>
</div>

Answer 2

您需要为column <div>s适当的classes以告诉引导程序如何调整它们的大小。 在bootstrap ， <div>分为12 imaginary columns ，而不管<div>的宽度如何。

因此，通过执行以下操作：

<div class="col-xs-6">
// width of 6 columns when window resolution is extra small

我们告诉bootstrap将此<div>的宽度设为parent宽度的50% 。

您也可以这样做，例如：

<div class="col-xs-6 col-md-3">
// when at extra small width is 6 columns, when at medium switch to 3 columns

在正确调整<div>s大小并包括jQuery和bootstrap脚本（以及bootstrap CSS ）之后，事情应该可以正常工作。

同样，无需指定images height和width ，它们应automatically获取container的maximum width并使用auto height 。

这是代码 （运行底部的代码段）：

 <!-- jQuery, Bootstrap scripts and bootstrap CSS --> <!-- put CSS in the head of the HTML doc, put scripts in head or bottom of the body --> <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> <div id="work-container"> <div class="row"> <!-- Carousel --> <div class="col-xs-6"> <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> </ol> <!-- Wrapper for slides --> <div class="carousel-inner"> <div class="item active"> <img src="http://www.quotemaster.org/images/b0/b0de398d580fe0cfc6431ec118c16cee.jpg" alt="Flower" /> </div> <div class="item"> <img src="http://ibmathsworld.com/wp-content/uploads/2016/01/IB-Examples.jpg" alt="Example" /> </div> </div> </div> <!-- End of id myCarousel --> </div> <!-- End of col-xs-6 --> <!-- Content --> <div class="col-xs-6"> <h2> content </h2> <div> <p>yeah, this is some content</p> </div> </div> <!-- End of col-xs-6 --> </div> <!-- End of row --> </div> <!-- End of work-container --> 

注意：我添加了一些示例内容和一些不同高度和宽度的示例图像，以演示调整大小