I Want to Image rotation in a modal pop up (overflow: auto )with CSS and JQuery , Wnen i Apply some part of image cuts when angle 90 or 270

Question

When image in vertical position watermark (date time) not show properly ](https://i.sstatic.net/LOlcendr.png)

Question:

I am working on a modal where an image can be rotated by 90 degrees each time the user clicks a button. The issue I am facing is that when the image is rotated to 90° or 270°, part of it gets cut off, even though I have set overflow: auto on the container.

What I Expect:

The full image should always be visible inside the modal. If necessary, the modal should adjust its size dynamically. If the image is too big, scrollbars should appear instead of cutting off the image.

What Happens Instead:

At 0° and 180° rotation, the image displays correctly. At 90° and 270° rotation, parts of the image are not visible. The modal size does not properly adjust to fit the rotated image.

   <div class="slideshow-container">

    @if (Model.Count > 0)
    {
        int counter = 1;
        foreach (var item in Model)
        {
            var imgpath = item.ImageUrl + "?var=" + DateTime.Now.Ticks;
            <div class="mySlides fade">
                <div class="row">
                    <div class="col-sm-4">
                        <div class="rot-icon">
                            <img data-id="@counter" src="@Url.Content("~/Content/images/rotation-icon.png")" class="rotation-icon" alt="" title="rotate image" style="height:32px;" >
                        </div>
                    </div>
                    <div class="col-sm-4 numbertext">@counter / @Model.Count</div>
                    <div class="col-sm-4"></div>
                    
                </div>

                <div class="img-rotation">
                    <img id="imageToRotate-@counter" src='@imgpath' />
                </div>
                <input id="imagehdn-@counter" type="hidden" value="@item.ImageName" />
                <input id="hdn-angle-@counter" type="hidden" value="0"/>
                <input id="hdn-isRotate-@counter" type="hidden" value="0" />
                @* <div class="text">@item.ImageName</div>*@
            </div>
            counter++;
        }
    }

    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
    <a class="next" onclick="plusSlides(1)">&#10095;</a>

</div>

    .mySlides .text {
     background: rgba(0, 0, 0, 0.2);
 }

 .mySlides img {
     max-width: 100%;
     /*max-height: 400px;*/
 }

 .rotate-button {
     max-width: 5.5%;
     margin-left: 79%;
     margin-top: 5px;
     cursor: pointer;
 }

 .img-rotation {
     align-items: center;
     display: block;
     overflow: auto;
     max-height:360px;
     padding: 0 60px;
     width: 100%;
 }

     .img-rotation img {
         /*height: 220px;*/
     }

   $(function () {
     var images = [];
var imageObj = {};
     var angle = [];

     for (let i = 0; i < @Model.Count; i++) {
         angle.push(0);
     }


     $('.rotation-icon').click(function () {

         $('#saveRotateImage').prop('disabled', false);

         $('#saveRotateImage').addClass('toggleRotate');

         const imageid = $(this).data('id');

         $(`#hdn-isRotate-${imageid}`).val(1);

         angle[imageid - 1] = (angle[imageid - 1] + 90) % 360;
         $(`#imageToRotate-${imageid}`).css('transform', 'rotate(' + angle[imageid - 1] + 'deg)');
         $(`#hdn-angle-${imageid}`).val(angle[imageid - 1]);
     })`

Please provide a proper minimal reproducible example of the issue. Include the rendered HTML, not template code we don't have the setup or the data for. — C3roe
– C3roe, Commented Feb 5 at 8:04
I Applied some css.. The Issue in which some image part cuts is solved but image shifted left at vertical position(90/270) I posted one more answer related to it, please find it — Vishal Kumawat
– Vishal Kumawat, Commented Feb 5 at 12:20

Vishal Kumawat · Accepted Answer · 2025-02-05 12:22:33Z

I Used the html page

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<style type="text/css">
body {
  font: normal 14px/100% "Andale Mono", AndaleMono, monospace;
  width: 300px;
  margin: 0 auto;
  display:flex;
  align-items:center;
  height:100vh;
}
.Click-here {
  cursor: pointer;
  background-image: linear-gradient(190deg, #f83600 0%, #fee140 100%);
  color: #fff;
  width: 180px;
  text-align: center;
  font-size:16px;
  padding: 18px 0;
  margin: 0 auto;
  transition:background-image 3s ease-in-out;
}
.Click-here:hover{
  transition:background-image 3s ease-in-out;
  background-image: linear-gradient(90deg, #fee140 0%, #f83600 100%);
}
.custom-model-main {
  text-align: center;
  overflow: hidden;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0; /* z-index: 1050; */
  -webkit-overflow-scrolling: touch;
  outline: 0;
  opacity: 0;
  -webkit-transition: opacity 0.15s linear, z-index 0.15;
  -o-transition: opacity 0.15s linear, z-index 0.15;
  transition: opacity 0.15s linear, z-index 0.15;
  z-index: -1;
  overflow-x: hidden;
  overflow-y: auto;
}

.model-open {
  z-index: 99999;
  opacity: 1;
  overflow: hidden;
}
`

 - 


----------

List item

-----------

`.custom-model-inner {
  -webkit-transform: translate(0, -25%);
  -ms-transform: translate(0, -25%);
  transform: translate(0, -25%);
  -webkit-transition: -webkit-transform 0.3s ease-out;
  -o-transition: -o-transform 0.3s ease-out;
  transition: -webkit-transform 0.3s ease-out;
  -o-transition: transform 0.3s ease-out;
  transition: transform 0.3s ease-out;
  transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out;
  display: inline-block;
  vertical-align: middle;
  width: 1000px;
  margin: 30px auto;
  max-width: 97%;
}
.custom-model-wrap {
  display: block;
  width: 100%;
  position: relative;
  background-color: #fff;
  border: 1px solid #999;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 6px;
  -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
  box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
  background-clip: padding-box;
  outline: 0;
  text-align: left;
  padding: 20px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  max-height: calc(100vh - 70px);
    overflow-y: auto;
}
.model-open .custom-model-inner {
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  transform: translate(0, 0);
  position: relative;
  z-index: 999;
}
.model-open .bg-overlay {
  background: rgba(0, 0, 0, 0.6);
  z-index: 99;
}
.bg-overlay {
  background: rgba(0, 0, 0, 0);
  height: 100vh;
  width: 100%;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  -webkit-transition: background 0.15s linear;
  -o-transition: background 0.15s linear;
  transition: background 0.15s linear;
}
.close-btn {
  position: absolute;
  right: 0;
  top: -30px;
  cursor: pointer;
  z-index: 99;
  font-size: 30px;
  color: #fff;
}

@media screen and (min-width:800px){
    .custom-model-main:before {
      content: "";
      display: inline-block;
      height: auto;
      vertical-align: middle;
      margin-right: -0px;
      height: 100%;
    }
}
@media screen and (max-width:799px){
  .custom-model-inner{margin-top: 45px;}
}




#container {
  width: 100%;
  height:500px;
  overflow: auto;
  text-align:center;
}
#container.rotate90,
#container.rotate270 {
  width: 100%;
}
#image {
  transform-origin: top left;
  /* IE 10+, Firefox, etc. */
  -webkit-transform-origin: top left;
  /* Chrome */
  -ms-transform-origin: top left;
  /* IE 9 */
}
#container.rotate90 #image {
  transform: rotate(90deg) translateY(-100%);
  -webkit-transform: rotate(90deg) translateY(-100%);
  -ms-transform: rotate(90deg) translateY(-100%);
}
#container.rotate180 #image {
  transform: rotate(180deg) translate(-100%, -100%);
  -webkit-transform: rotate(180deg) translate(-100%, -100%);
  -ms-transform: rotate(180deg) translateX(-100%, -100%);
}
#container.rotate270 #image {
  transform: rotate(270deg) translateX(-100%);
  -webkit-transform: rotate(270deg) translateX(-100%);
  -ms-transform: rotate(270deg) translateX(-100%);
}

</style>
<body>

<div class="Click-here">Click Here</div>        
<div class="custom-model-main">
    <div class="custom-model-inner">        
    <div class="close-btn">×</div>
        <div class="custom-model-wrap">
            <button id="button">Click me!</button>
<div id="container">
<img src="https://static-cse.canva.com/image/2413/olive3.d17ac722.png" id="image" />
</div>
        </div>  
    </div>  
    <div class="bg-overlay"></div>
</div> 

</body>

<script type="text/javascript">
$(".Click-here").on('click', function() {
  $(".custom-model-main").addClass('model-open');
}); 
$(".close-btn, .bg-overlay").click(function(){
  $(".custom-model-main").removeClass('model-open');
});



var angle = 0,
  img = document.getElementById('container');
document.getElementById('button').onclick = function() {
  angle = (angle + 90) % 360;
  img.className = "rotate" + angle;
}


</script>
</html>

That's not an answer to this question, so please do not post it as an answer. Edit your question to include all the relevant info instead.
I Will take care of it, Actually i am a new contributor, so i'm not much familiar to it
Can you explain more on what specific parts of the HTML code helps answer the question?
"The rotation effect is applied using transform: rotate(90deg) in the #container.rotate90 #image CSS. However, the issue of shifting occurs because of how the image transforms from the top left origin. To keep it centered, I tried adjusting the transform-origin property and using additional translations in CSS/JavaScript." but the image shifted to left of the container..

Collectives™ on Stack Overflow

I Want to Image rotation in a modal pop up (overflow: auto )with CSS and JQuery , Wnen i Apply some part of image cuts when angle 90 or 270

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related