Как запретить элементу div изменять размер содержимого HTML? ⇐ CSS

[Anonymous]

Я использую преобразование html в изображение, что позволяет мне сделать снимок экрана выбранного элемента div.
Код приведен ниже:

Код: Выделить всё

const contentRef = useRef(null);

const handleCapture = () => {
const node = contentRef.current;
toPng(contentRef.current, { cacheBust: true, width: 1600, height: 410 })
.then(dataUrl => {
console.log("Captured image:", dataUrl);
const link = document.createElement("a");
link.download = "lineup.png"
link.href = dataUrl;
link.click();
})
.catch(error => {
console.error("Error capturing screenshot:", error)
});
};

Однако, когда я использую div с ref={contentRef}, HTML-код оказывается повсюду, а разметка портится. Есть ли способ запретить этому div изменять размер макета? Причина, по которой я использую ссылку в этом div, заключается в том, что contentRef работает только для последнего div, поэтому я не могу использовать его для каждого, и поэтому я обернул div вокруг них всех, поэтому независимо от того, какой SoccerLineup выбран, он будет иметь возможность сделать скриншот. Кроме того, когда я попытался использовать абсолютные и относительные свойства для дочернего div, чтобы «взять на себя» родительский div, снимок экрана оказался пустым, я предполагаю, что это произошло из-за того, что родительский div был пустым, поскольку он был «захвачен» . Как я могу это предотвратить?

Подробнее здесь: https://stackoverflow.com/questions/785 ... ml-content