html - 旋转的图像超出 div
问题描述
我实际上正在将 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'};
这是正在发生的事情的图像
如何将其保存在容器内?
解决方案
在这里你可以找到使用 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>