引導輪播中圖像尺寸未調整

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

注意：我添加了一些示例內容和一些不同高度和寬度的示例圖像，以演示調整大小