Обрезать, а затем растянуть фоновое изображение, чтобы соответствовать области - PullRequest
Новая
       27

Обрезать, а затем растянуть фоновое изображение, чтобы соответствовать области

0 голосов
/ 15 января 2019

У меня есть изображение шириной 800 пикселей и высотой 500 пикселей, и я рассчитываю на первое кадрирование прибл. x пиксель с левой стороны, y пиксель с правой стороны, z пиксель с нижней части, затем поместите его в область фона шириной 1200 пикселей, высотой 1000 пикселей, где x, y и z различны.

Я также пытаюсь сделать его не отвечающим, чтобы он не масштабировался при изменении размера окна, поэтому настройка background-size = cover или contain не является опцией. Любой совет будет оценен, например, если я могу сначала обрезать изображение, а затем просто заполнить его в моей области. Спасибо.

Ответы [ 2 ]

0 голосов
/ 15 января 2019

Вы можете рассмотреть background-size в сочетании с процентным значением и значением в пикселях, чтобы получить то, что вы хотите: 

.container {
  background-image:url(https://picsum.photos/800/600?image=1069);
  background-size:
    calc(100% + 100px + 200px) /*100% + x + y*/
    calc(100% + 50px); /*100% + z*/
  background-position:-100px 0; /*we shift by x*/
  background-repeat:no-repeat;
  
  width:1200px;
  height:1000px;
}
<div class="container">

</div>

Вы также можете добавить переменную CSS, чтобы легко управлять этим: 

.container {
  --x: 100px;
  --y: 200px;
  --z: 50px;
  background-image: url(https://picsum.photos/800/600?image=1069);
  background-size: calc(100% + var(--x) + var(--y)) calc(100% + var(--z));
  background-position: calc(-1 * var(--x)) 0;
  background-repeat: no-repeat;
  
  width: 1200px;
  height: 1000px;
}
<div class="container">

</div>
0 голосов
/ 15 января 2019

Я не думаю, что вы можете осуществить это без некоторого хитрого JavaScript. Но я вставил это в код, чтобы другим было проще взглянуть - это хорошо, когда вы задаете первоначальный вопрос.

Как есть, здесь используются background-position-x и -y, чтобы «обрезать» части изображения, а затем, если есть способ увеличить изображение, можно обрезать и другие концы, я бы вообразил , 

.container {
border: solid black 1px;
height: 1000px;
width: 1200px;
background-image: url(https://snag.gy/dL487F.jpg);
background-position-x: -100px;
background-position-y: -50px;
background-repeat: no-repeat;
}
<div class="container">

</div>
...