Это ошибка дизайна материалов для веба?

Моя карта mdc имеет пробел справа после вставки фона (svg). Пример находится на codepen https://codepen.io/BhavyaSingh2003/pen/ZwByBy

body,
html {
  height: 100%;
}

.mycard {
  height: 90%;
  width: 90%;
  margin-right: 5%;
  margin-left: 5%;
  background-image: url("https://svgshare.com/i/Aut.svg");
  background-position: center;
  background-size: 100% auto;
  background-repeat: no-repeat;
}

<script src = "https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
<link href = "https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css" rel = "stylesheet"/>


<link rel='stylesheet' href='https://fonts.googleapis.com/icon?family=Material+Icons'>
<div class = "mdc-card mycard">
</div>

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

вам также нужно сбросить маржу: codepen.io/anon/pen/JxbrVM

— 30.01.2019 12:34

я сделал это

— 30.01.2019 12:35

но все равно есть пробел

— 30.01.2019 12:37

Нужна тень или нет?

— 30.01.2019 12:38

Вы не сбрасывали поля на теле ..., но вы говорите о соотношении изображений?

— 30.01.2019 12:39

тень не нужна, но после сброса отображается пустое пространство примерно 10–15 пикселей.

— 30.01.2019 12:41

Это не проблема с полями, потому что background-position не учитывает поля или отступы. На самом деле я не могу понять, в чем причина проблемы

— 30.01.2019 12:43

что делать сейчас?

— 30.01.2019 12:44

Проблема в вашем svg, потому что у него есть поля

— 30.01.2019 12:46

нет, у него нет полей

— 30.01.2019 12:49

Есть rect с translate(281.22 1965.8) rotate(-63.57), это вызывает маржу

— 30.01.2019 12:50

i.ibb.co/sW0m05J/Скриншот-10.png см. это

— 30.01.2019 12:52

как решить эту проблему у меня есть файл иллюстратора для этого

— 30.01.2019 12:54

html css material-design

30.01.2019 12:30

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Ответы 1

Если хотите, вы добавляете это пользовательское решение. Но это не идеальное решение.

body,html{
  height:100%;
margin:0px;
}
.mycard {
  height: 90%;
  width: 90%;
}


.mdc-card.mycard:before {
    content: '';
    position: absolute;
    height: 100%;
    width: 100%;
    background-image: url(https://svgshare.com/i/Aut.svg);
    background-repeat: no-repeat;
    background-size: 100%;
    right: -20%;
    top: 0;
    background-position: right;
    white-space: unset;
}

"" ссылка на фоновый URL

— 30.01.2019 12:55

не повезло, посетите URL-адрес codepen еще раз, которым я поделился, чтобы увидеть, что все еще есть пробел

— 30.01.2019 12:57

проблема теперь решена, это было из-за наклона прямоугольного элемента в svg

— 30.01.2019 13:25

30.01.2019 12:52