轮播放置图像不居中但在较小的屏幕尺寸

Question

我使用轮播引导程序制作了一个全屏滑块。 当屏幕尺寸变小时，背景图像会调整大小并居中。 当屏幕变小时我不想让它居中，但我想让背景图像集中在右边。

这是背景图像在普通屏幕上的样子（它是全屏滑块）： Normal Screen

这是背景图像在小屏幕上的样子（仍然是全屏）： Smaller Screen

这就是我所做的

@media (max-width: 768px) {      
  .carousel-inner>.item{
        position: relative;
    }
    .carousel-inner>.item>img{
        position: absolute;
        top: 0;
        right: 0;
    }
}

<div class="carousel-inner">
	<div class="item active">
		<img id="h-1" src="Assets/1.jpg" alt="" />
		<div class="container">
		  <div class="carousel-caption">
		    <h1>C</h1>
		    <hr>
		    <ul class="descslider">							
			  <li>asd</li>
			  <li>qwe</li>
			  <li>zxcv</li>
		    </ul>
		  </div>
		</div>
	</div>

	<div class="item">
		<img id="h-2" src="Assets/2.jpg" alt="" />
		<div class="container">
		  <div class="carousel-caption">
		    <h1>C</h1>
		    <hr>
		    <ul class="descslider">							
			  <li>asd</li>
			  <li>qwe</li>
			  <li>zxcv</li>
		    </ul>
		  </div>
		</div>
	</div>

	<div class="item">
		<img id="h-3" src="Assets/3.jpg" alt="" />
		<div class="container">
		  <div class="carousel-caption">
		    <h1>C</h1>
		    <hr>
		    <ul class="descslider">							
			  <li>asd</li>
			  <li>qwe</li>
			  <li>zxcv</li>
		    </ul>
		  </div>
		</div>
	</div>
</div>

		

我试过的那个东西根本没用 请帮忙，谢谢:)

Answer 1

好的，我现在找到了您要查找的内容，您希望它在窗口调整大小时在某个断点处与右侧的图像一起调整大小。 Bootstrap 有相当于浮动类pull-right 和pull-left。

当视口大小低于 768px 时，我使用 jQuery 应用这些类，并添加了一些自定义 CSS。

JS：

$(window).on('resize', function() {
    if($(window).height() > 768) {
        $('img').addClass('pull-right');
        $('.carousel-caption').addClass('pull-left');
    }else{
        $('img').removeClass('pull-right');
        $('.carousel-caption').removeClass('pull-left');
    }
})

CSS：

@media (max-width: 768px) {      
  .carousel-inner >.item > img{
      max-width: 40%;
    }
   .carousel-caption{
      max-width: 40%;
   }
}

您可以调整此 CSS 中的百分比值，以根据自己的喜好自定义每个元素的宽度。

新CodePen Demo