Как вертикально и горизонтально центрировать квадратный SVG в CSS так, чтобы в окне просмотра было видно только изображение независимо от его размеров - PullRequest
Новая
       34

Как вертикально и горизонтально центрировать квадратный SVG в CSS так, чтобы в окне просмотра было видно только изображение независимо от его размеров

1 голос
/ 20 апреля 2019

Я пытаюсь взять SVG и отобразить его в мобильных и настольных браузерах.SVG квадрат , поэтому, если я просто попытаюсь центрировать его по вертикали и горизонтали, используя contain, он покажет квадратное изображение в центре.Это не то, что я хочу.

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

Мобильный : 

  ┌┄┄┄┄╔═══════╗┄┄┄┄┐
  ┆    ║       ║    ┆
  ┆    ║       ║    ┆
  ┆    ║       ║    ┆
  ┆    ║       ║    ┆
  ┆    ║       ║    ┆
  ┆    ║       ║    ┆
  └┄┄┄┄╚═══════╝┄┄┄┄┘
        ^           ^
        |           |
  viewport          image

Рабочий стол : 

                image
                |
                v
       ┌┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┐
       ╔═════════════════╗
       ║                 ║    
       ║                 ║    
       ║                 ║    
       ║                 ║<-- viewport
       ║                 ║    
       ║                 ║    
       ╚═════════════════╝
       └┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┘

Я пытался object-fit: cover, но не пошел.

1 Ответ

1 голос
/ 20 апреля 2019 
yourSelector {
  background: url('path/to/your/svg') center /cover;
}

... должен это сделать.
В кратком изложении выше, /cover - это сокращение от 

background-size: cover;

Смотрите, как это работает: 

div {
  background: url('https://placeholder.pics/svg/300') center /cover;
}
.one{
  height: 200px;
  width: 50%;
}
.two {
  height: 100px;
  width: 100%;
}
.three {
  height: 400px;
  width: 100px;
}
.four {
  height: 200px;
  width: 200px;
}
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>

Или как background-image из <body>: 

body {
  background: url('https://placeholder.pics/svg/300') center /cover;
  margin: 0;
  min-height: 100vh;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...