旋转的图像超出 div答案

【问题标题】：rotated image goes out of div旋转的图像超出 div
【发布时间】：2018-10-29 15:50:05
【问题描述】：

我实际上是将 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'};

这是正在发生的事情的图片

如何将其保存在容器中？

【问题讨论】：

您能否添加您的 sn-p 以便更好地了解正在发生的事情？
我已经添加了 sn-ps。你指的是哪一个？？
使用图像处理 sn-p...
添加了更多代码和图片
这取决于图像的高度，如果你使用 transform : rotateZ 旋转一个长的纵向文档图像，你必须保持它的高度 100% 和宽度自动。或宽度：100% 高度：自动；

标签： html css

【解决方案1】：

在这里你可以找到使用 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>

【讨论】：