html - 如何使用 translateX 以固定高度和响应宽度在 Bootstrap 3 轮播中居中图像？

Question

我有一个旋转木马，其宽度为:100%，高度为:831 像素，采用流体布局。我在将 3600 像素宽乘 831 像素高的图像居中时遇到问题。我需要图像以所有视口(viewport)宽度和分辨率为中心。

我试过使用 transform:translateX，但图像总是在 left:0 处结束。

这是我的:

<div class="mainTopVisual clearfix">
          <div id="m_top-visual" class="carousel slide" data-ride="carousel">
            <!-- Indicators -->
            <ol class="carousel-indicators">
              <li data-target="#m_top-visual" data-slide-to="0" class="active"></li>
              <li data-target="#m_top-visual" data-slide-to="1"></li>
              <li data-target="#m_top-visual" data-slide-to="2"></li>
              <li data-target="#m_top-visual" data-slide-to="3"></li>
              <li data-target="#m_top-visual" data-slide-to="4"></li>
            </ol>
            <div class="carousel-inner" role="listbox">
              <div class="item active">
                <img class="first-slide" src="images/main/j1.jpg" alt="First slide">
              </div>
              <div class="item">
                <img class="second-slide" src="images/main/j2.jpg" alt="Second slide">
              </div>
              <div class="item">
                <img class="third-slide" src="images/main/j3.jpg" alt="Third slide">
              </div>
              <div class="item">
                <img class="forth-slide" src="images/main/j4.jpg" alt="Forth slide">
              </div>
              <div class="item">
                <img class="fifth-slide" src="images/main/j5.jpg" alt="Fifth slide">
              </div>
            </div>
            <a class="left carousel-control" href="#m_top-visual" role="button" data-slide="prev">
              <span class="main_top-visual flaticon-left-arrow" aria-hidden="true"></span>
              <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" href="#m_top-visual" role="button" data-slide="next">
              <span class="main_top-visual flaticon-next" aria-hidden="true"></span>
              <span class="sr-only">Next</span>
            </a>
            <div id="carouselButtons">
              <button id="playButton" type="button" class="btn btn-default">
                <span class="flaticon-arrows-3"></span>
              </button>
              <button id="pauseButton" type="button" class="btn btn-default">
                <span class="flaticon-pause-bars"></span>
              </button>
            </div>
          </div><!-- /.carousel --> 
        </div>

这是CSS:

<style>
div.mainTopVisual{
margin-top:0;
  padding-top:0;
  padding-bottom:0;
}
.m_top-visual_inner{
  width:100%;
  margin:0;
  position:relative;
}
.carousel {
  height: 831px;
  margin-bottom:0;
}
.carousel-inner {
position: relative;
overflow: hidden;
width: 100%;}
.carousel .item {
  height: 831px;
  width:3600px;
  background-color: #000;
}
.carousel-inner > .item > img {
  position: absolute;
  width:3600px;
  height:831px;
  top:0;
  left:50%;
  transform:translate(-50%, 0);
  max-width:none;
}

</style>

非常感谢您的帮助。

Answer 1

对于那些有同样问题的人，我在这里找到了答案http://parkhurstdesign.com/improved-carousels-twitter-bootstrap/