Создание круглой кнопки закрытия с крестом внутри

Условие

Сделайте круглую кнопку закрытия, в которой внутри расположен крест. Длина каждой линии крестика должна составлять 75 % от ширины кнопки, а толщина – 2 px. При изменении размеров кнопки линии крестика должны автоматически масштабироваться, сохраняя пропорцию 3/4 от ширины.

 <!DOCTYPE html>
<html>
<head>
    <title>JavaScript Sandbox</title>
    <meta charset="UTF-8" />
</head>

<body>
    <img
    src=""
    alt="" />
    </div>
    <script src="/index.js" type="module"></script>
    </body>
</html>

Ответ

Сделайте две абсолютно позиционированные линии через ::before и ::after: ширина 75%, высота 2px, поворот на ±45°. Кнопке задайте равные стороны и border-radius: 50%.

<button class="close" type="button" aria-label="Закрыть"></button>

.close {
  --size: 40px;
  position: relative;
  width: var(--size); height: var(--size);
  padding: 0; border: 0; border-radius: 50%;
  background: #eee; color: #222; cursor: pointer;
}
.close::before, .close::after {
  content: ''; position: absolute;
  left: 50%; top: 50%; width: 75%; height: 2px;
  background: currentColor;
  transform: translate(-50%, -50%) rotate(45deg);
}
.close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.close:focus-visible { outline: 2px solid royalblue; outline-offset: 3px; }

Меняется только --size: длина линий масштабируется, толщина остаётся 2px. Изображение не требуется; кнопку следует связать с обработчиком закрытия соответствующего окна.