图像未正确对齐引导程序中的轮播

Question

图像在页面中心未正确对齐。相反，它在页面的左侧对齐。此外，图像具有各种大小。那么，如何使它固定到一个特定的大小并使其响应。请检查以下代码是否相同 -

#carousel-custom {
    margin: 20px auto;
    width: 100%;
	height: auto;
}
#carousel-custom .carousel-indicators {
    margin: 10px 0 0;
    overflow: auto;
    position: static;
    text-align: left;
    white-space: nowrap;
    width: 100%;
}
#carousel-custom .carousel-indicators li {
    background-color: transparent;
    -webkit-border-radius: 0;
    border-radius: 0;
    display: inline-block;
    height: auto;
    margin: 0 !important;
    width: auto;
}
#carousel-custom .carousel-indicators li img {
    display: block;
    opacity: 0.5;
}
#carousel-custom .carousel-indicators li.active img {
    opacity: 1;
}
#carousel-custom .carousel-indicators li:hover img {
    opacity: 0.75;
}
#carousel-custom .carousel-outer {
    position: relative;
}

<!-- begin snippet: js hide: false -->

    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <div id="myPicture" class="carousel slide" data-ride="carousel">
       <ol class="carousel-indicators">
          <li data-target = "#myPicture" data-slide-to="0" class="active"></li>
          <li data-target = "#myPicture" data-slide-to="1" ></li>
          <li data-target = "#myPicture" data-slide-to="2" ></li>
       </ol>
       <div class="carousel-inner">
          <div class="item active">
               <img src="http://placehold.it/250x350" alt="test" class="img-responsive">
          </div>
          <div class="item">
             <img src="http://placehold.it/300x350" alt="test" class="img-responsive">
          </div>
          <div class="item">
            <img src="http://placehold.it/200x350" alt="test"  class="img-responsive">				
          </div>
       </div>
      <a class="carousel-control left" href="#myPicture" data-slide="prev"><span class ="icon-prev"></span></a>
			<a class="carousel-control right" href="#myPicture" data-slide="next"><span class ="icon-next"></span></a>
		</div> 
  

Answer 1

我会先删除这些style="max-height:1400px;max-width:900px"

#carousel-custom {
    margin: 20px auto;
    width: 100%;
    height: auto;
}
#carousel-custom .carousel-indicators {
    margin: 10px 0 0;
    overflow: auto;
    position: static;
    text-align: left;
    white-space: nowrap;
    width: 100%;
}
#carousel-custom .carousel-indicators li {
    background-color: transparent;
    -webkit-border-radius: 0;
    border-radius: 0;
    display: inline-block;
    height: auto;
    margin: 0 !important;
    width: auto;
}
#carousel-custom .carousel-indicators li img {
    display: block;
    opacity: 0.5;
}
#carousel-custom .carousel-indicators li.active img {
    opacity: 1;
}
#carousel-custom .carousel-indicators li:hover img {
    opacity: 0.75;
}
#carousel-custom .carousel-outer {
    position: relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div id="myPicture" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
        <li data-target="#myPicture" data-slide-to="0" class="active"></li>
        <li data-target="#myPicture" data-slide-to="1"></li>
        <li data-target="#myPicture" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">
        <div class="item active">
            <img src="http://placehold.it/2350x1150/000" alt="test" class="img-responsive">
        </div>
        <div class="item">
            <img src="http://placehold.it/2350x1150/f00" alt="test" class="img-responsive">
        </div>
        <div class="item">
            <img src="http://placehold.it/2350x1150/000" alt="test" class="img-responsive">
        </div>
    </div>	<a class="carousel-control left" href="#myPicture" data-slide="prev"><span class ="icon-prev"></span></a>
	<a class="carousel-control right" href="#myPicture" data-slide="next"><span class ="icon-next"></span></a>

</div>

Answer 2

将以下内容添加到您的 css 以使图像居中对齐

#carousel-custom .carousel-inner > .item > a > img, 
#carousel-custom .carousel-inner > .item > img {
    margin: 0 auto;
}

carousel wrapper 的 id 也是 myPicture 将其更改为 carousel-custom 因为它在 css 中使用

你在 img src 标签中传递了不同尺寸的图片。

#carousel-custom {
    margin: 20px auto;
    width: 100%;
	height: auto;
}
#carousel-custom .carousel-inner > .item > a > img, 
#carousel-custom .carousel-inner > .item > img {
    margin: 0 auto;
}
#carousel-custom .carousel-indicators {
    margin: 10px 0 0;
    overflow: auto;
    position: static;
    text-align: left;
    white-space: nowrap;
    width: 100%;
}
#carousel-custom .carousel-indicators li {
    background-color: transparent;
    -webkit-border-radius: 0;
    border-radius: 0;
    display: inline-block;
    height: auto;
    margin: 0 !important;
    width: auto;
}
#carousel-custom .carousel-indicators li img {
    display: block;
    opacity: 0.5;
}
#carousel-custom .carousel-indicators li.active img {
    opacity: 1;
}
#carousel-custom .carousel-indicators li:hover img {
    opacity: 0.75;
}
#carousel-custom .carousel-outer {
    position: relative;
}

<!-- begin snippet: js hide: false -->

    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <div id="carousel-custom" class="carousel slide" data-ride="carousel">
       <ol class="carousel-indicators">
          <li data-target = "#carousel-custom" data-slide-to="0" class="active"></li>
          <li data-target = "#carousel-custom" data-slide-to="1" ></li>
          <li data-target = "#carousel-custom" data-slide-to="2" ></li>
       </ol>
       <div class="carousel-inner">
          <div class="item active">
               <img src="http://placehold.it/300x350" alt="test" class="img-responsive">
          </div>
          <div class="item">
             <img src="http://placehold.it/300x350" alt="test" class="img-responsive">
          </div>
          <div class="item">
            <img src="http://placehold.it/300x350" alt="test"  class="img-responsive">				
          </div>
       </div>
      <a class="carousel-control left" href="#carousel-custom" data-slide="prev"><span class ="icon-prev"></span></a>
			<a class="carousel-control right" href="#carousel-custom" data-slide="next"><span class ="icon-next"></span></a>
		</div>