Изображение из веб-камеры будет находиться (то есть, вписано) в центре рамки (viewport), заданной свойствами самого webcam, то есть [width]
и [height]
, соответственно пользователь будет видеть края изображения.
Таким образом, рекомендую и в css
, и в свойства webcam задавать одни и те же значения размеров, тогда и крестик будет в центре и css-рамка
вокруг viewport.
CSS выглядит вот таким образом:
webcam {
position: absolute;
width: 640px; /* Ширина рамки. Это не свойство [width] компонента */
height: 480px; /* Высота рамки */
border-width: 4px; /* Ширина борта */
border-color: red; /* Цвет */
border-style: solid; /* Тип */
border-radius: 5px; /* Радиус закругления углов */
background: lightcyan; /* Цвет фона */
}
/* Крестик (знак +) в середине рамки */
webcam:after {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
content: "+"; /*Можно использовать HEX-code любого символа*/
font-size: 30px; /* размер символа */
color: red; /*его цвет*/
line-height: 480px; /* Межстрочный интервал. Выравнивание крестика по-вертикали */
text-align: center; /* Выравнивание по-горизонтали */
}