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

Question

Моя карта 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>

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

Answer 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;
}