我实际上是将pdf转换为图像,然后使用这些图像。 我可以将图像旋转360度,每次旋转等于90度。
问题是,当我旋转图像时,旋转后的图像会从容器中移出,如果我确实根据旋转后的图像(水平位置)调整高度宽度,那么当我再次旋转时,图像会再次变直因此不对齐(即垂直位置)。
因此,我该怎么做才能将旋转后的(水平位置)图像保留在容器内(并且仍然显示完整图像而不隐藏溢出的部分。
这就是我现在正在做的事情。
<div className={styles.pdfContainer} >
<div className={styles.pdfButtons} >
<span>Page No. {pdfIndex}</span>
<span className={styles.actIcons}>
<Icon onClick={(e)=>this.rotatePdf(item,index,pdfpath,e)} type="reload" /> <Icon onClick={(e)=>this.deletePdf(item,pdfpath,index,e)} type="close-circle-o" />
</span>
</div>
<ReactImageMagnify {...{
className:styles.imgDiv,
imageStyle:rotateStyle,
enlargedImageContainerStyle:{width:1200,height:300,zIndex:9999},
isActivatedOnTouch:true,
isEnlargedImagePortalEnabledForTouch:true,
// enlargedImageStyle:{width:900,height:300}
smallImage: {
alt: 'Wristwatch by Ted Baker London',
isFluidWidth: true,
src: item.imgref
},
largeImage: {
src: item.imgref,
width: 1200,
height: 1800
}
}} />
<div className={styles.zoomDiv} >
<span className={styles.zoom} ><Icon onClick={()=>this.zoomPdf(pdfpath)} type="search" /> </span>
</div>
</div>
和CSS样式
.zoomDiv{
position:absolute;
top:297px;
width: 100%;
background-color: black;
/* opacity: 0.8; */
color: white;
font-weight: bold;
cursor:pointer;
}
.pdfContainer{
position: relative;
border: 1px solid black;
height: 320px;
width: 275px;
cursor:pointer;
}
.imgDiv{
position: absolute;
// top: 38px;
// left: 24px;
margin-left:19px;
width: 76%;
cursor:pointer;
}
当我单击“旋转”按钮时,这就是应用于图像的样式
rotateStyle = {position:'relative', transform:`rotate(${rotate}deg)`,marginLeft:'6px'};
这是正在发生的事情
如何将其保存在容器中?
答案 0 :(得分:0)
在这里您可以找到使用max-width的完整页面:100%;图片内容。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.image-container {
width: 250px;
height: 250px;
border: 1px solid black;
overflow-y: auto;
}
.image-content {
max-width: 100%;
margin: auto;
transform: rotateZ(90deg);
}
</style>
</head>
<body>
<div class="image-container">
<img class="image-content" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRIAGYMt71HbN9b3S3WxU_m5AbyCDUAK_CYhMdvKsi7LRpB02Ue">
</div>
</body>