Как равномерно обрезать левую и правую стороны изображения при уменьшении размера экрана? (запрос @media) - PullRequest
Новая
       20

Как равномерно обрезать левую и правую стороны изображения при уменьшении размера экрана? (запрос @media)

0 голосов
/ 22 июня 2019

Я не могу найти способ обрезать равное количество левой и правой сторон изображения, поскольку я уменьшаю размер экрана.Я пытаюсь добавить запрос @media в конце моего файла CSS, чтобы учесть это;Тем не менее, я не знаю, что положить в него.В настоящее время у меня есть контейнер .main, в котором хранится мое фоновое изображение для моей целевой страницы. 

body {
    margin: 0px;
    padding: 0px;
    height: 770%;
    background-color: #170D2F;
    display: flex;
}

.main {
    position: absolute;
    width: 88%;
    height: 800px;
    cursor: auto;
    background: url(background.png);
    background-size: auto;
    top: 0;
    left: 6%;
    overflow: hidden;
    background-color: #170D2F;
}

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

@media (max-width: 1439px) {
   .main {
     ...
  }
}

Я пытаюсь выяснить, как уменьшить размер фона с обеих сторон, потому что в настоящее время, когда я уменьшаю размер моей страницы, он скорее обрезает часть моего изображениячем уменьшить его размер.Спасибо!

1 Ответ

2 голосов
/ 22 июня 2019

Вы можете достичь этого без медиа-запроса.

просто отредактируйте background свойство в .main классе следующим образом:

background: url(background.png) center no-repeat;

замените background.png источником изображения

...