第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

react-file-viewer 使任何文件都非常小

react-file-viewer 使任何文件都非常小

猛跑小豬 2022-07-15 09:56:03
盡管我搜索了 react-file-viewer 的文件大小,但我找不到任何東西。我想使用 react-file-viewer 單擊文件名超鏈接并在新頁面中打開文件(圖像、文檔或 excel 表)。渲染工作正常,除了圖像/文檔大小。我有以下示例:import React from "react";import FileViewer from "react-file-viewer";import { Fragment } from "react";import imGurPic from "./MainBody/imGurPic.ts";const MainBody = () => {  const file =imGurPic;       const type = "jpeg";   return (    <Fragment>       <FileViewer fileType={type} filePath={file} />     </Fragment>   );};export default MainBody;imGurPic 是我從 imGur 中隨機選擇的圖像,因為它的尺寸很大(3024x4032 像素)(別擔心它是貓圖像...鏈接在這里...我轉(zhuǎn)換為我在 filePath 道具中使用的 base64 字符串FileViewer 組件。最終,它將是來自 db 作為字節(jié)數(shù)組的 base64 字符串。在下面的沙箱中,我設(shè)法創(chuàng)建了一個演示,卻發(fā)現(xiàn)它太小了(72*96px)。我真的不明白為什么它會占用這么少的空間。此外,我輸入的任何文檔或 excelsheet,最大高度為 96px。我怎樣才能改變它?它似乎繼承自父元素,但 Mainbody 占據(jù)了頁眉和頁腳之間的所有可用空間。對此的任何幫助將不勝感激。這里是沙盒 -->沙盒演示 萬一有人打不開,這里是截圖 -->
查看完整描述

1 回答

?
倚天杖

TA貢獻1828條經(jīng)驗 獲得超3個贊

也必須弄清楚這一點。如果您希望圖像縮放以適合您的尺寸要求,只需在周圍的 div 中設(shè)置 height=100%。例如


<div style={{ height: '100%' }}>

   <ReactFileViewer />

</div>

如果您根本不希望圖像縮放,那就有點棘手了。我不得不求助于一些凌亂的 CSS 來覆蓋硬連線的寬度和高度設(shè)置:


.pg-viewer-wrapper {

    overflow-y: unset !important;

}


.photo-viewer-container {

    width: unset !important;

    height: unset !important;

}


.photo-viewer-container > img {

    width: unset !important;

    height: unset !important;

}

如果該組件具有縮放等功能(例如,適合、填充、百分比),那就太好了,但我認為該庫不再被維護(查看仍在等待的舊 PR),因此建議分叉和實施比我所做的更清潔的解決方案。


查看完整回答
反對 回復(fù) 2022-07-15
  • 1 回答
  • 0 關(guān)注
  • 533 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號