Как сделать мое фоновое изображение одинаковым на разных компьютерах? - PullRequest
0 голосов
/ 18 февраля 2019

Я установил фоновое изображение для больших и средних экранов.У меня есть MacBook с сенсорной панелью, и он идеально подходит.

Если я поиграю с мышью, чтобы сделать окно меньше (чтобы посмотреть, как оно будет выглядеть при разных разрешениях и меньшем количестве пикселей), оно будет полностью адаптивным и выглядит хорошо (немного обрезает правую часть изображения, но это не увеличение).То же самое, когда я открываю инструменты разработчика, версия Ipad pro обрезается наполовину, но не масштабируется.

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

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

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

Я пробовал - высота: авто, ширина: 100vw, размер фона: содержать(но это слишком мало) и не повторять ... в основном все с помощью css

background-image: url(/assets/dessin-ba68b8b….png);
background-size: cover;
height: 100vh;

Спасибо

1 Ответ

0 голосов
/ 18 февраля 2019

Когда вы используете cover для фона, гарантируется, что одно и то же изображение НЕ будет выглядеть идеально на всех размерах экрана, поскольку браузер должен отображать его в разных размерах.

Для обработки этого вы можете сгенерироватьнесколько изображений, каждое для размера экрана, к которому вы стремитесь, и используйте медиазапросы CSS , чтобы применить соответствующее изображение для каждого размера экрана.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...