Question

我想要一个滑块来控制div的background-image属性的大小，我希望mininum值可以填充容器，而不管图像的大小（和比例）如何。

HTML

<div class="main"></div>

<div class="controls">
  <span>Size</span>
  <input type="range" class="i1" max="150">

  <span>Position X</span>
  <input type="range" class="i2">

  <span>Position Y</span>
  <input type="range" class="i3">
</div>

CSS

html, body{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.main{
   background-image: url(https://picsum.photos/600/400/?image=355);
   width: 300px;
   height: 300px;
   border: 2px solid red;
   background-size: 100%;
   background-repeat: no-repeat;
   background-position: center;
}

.controls{
  width: 12rem;
  background: rgba(0,0,0,0.9);
  border-radius: 5px;
  padding: 1rem;
  color: #fff;
  top: 1rem;
  position: fixed;
  right: 1rem;
}

.controls span{
  width: 100%;
  display: block;
}

.controls input{
  margin-bottom: 1rem;
}

JS

$('.i1').on('input', inputSize);
$('.i2').on('input', inputX);
$('.i3').on('input', inputY);

function inputSize(){
    var val = $(this).val();
  $('.main').css('background-size', 'auto ' + val + '%');
}

function inputX(){
    var val = $(this).val();
  $('.main').css('background-position-x', val+'%');
}

function inputY(){
    var val = $(this).val();
  $('.main').css('background-position-y', val+'%');
}

当然，我可以在滑块中使用最小值（例如，150），但如果图像太高，它仍然不会填充div。

有什么想法吗？

此外，它不应该使用更多的div（例如，.main中的另一个div），它只能使用bg-image。

背景大小滑块可避免背景未填充容器

0 个答案: