Question

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

这是普通屏幕背景图像的样子（它是全屏滑块）： 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

旋转木马放置img不居中，但在较小的屏幕尺寸

1 个答案: