@NogDogAug 05.2022 — #Might be useful to see the relevant HTML/CSS you used. The basic problem is geometry: if you rotate a rectangle inside of a similar sized rectangle, it will no longer fit since its diagonals must be longer than its sides. So first we need to know how you want to deal with that visually: should the rotated image rectangle be reduced in size so that it still fits, or should some padding/margin be added to allow it to overlap but be positioned more to the right, or...???
Single backticks (probably created by the button `</></C>) won't work reliably when posting code. You better use code tags: <C>your code here` or triple backticks. I edited your posting accordingly.
> This would solve one problem, but I am trying that the image
> gets back in vertical original form when in mobile view.
> So if I use the rotated image, then that would be a problem..
No this is not a problem, You will have two images, one vertical
and one rotated let's call them, for example, iphone6-vrt.png and
iphone6-rot.png.
Use this HTML <i> </i><div class="col-lg-6" id="cat-image"> <img class="image1" src="images/iphone6.png-rot" alt="iphone-mockup"> <img class="image2" src="images/iphone6.png-vrt" alt="iphone-mockup"> </div>
...with this CSS... <i> </i>.image2 { display: none; }
You then set a media query to swap images at your requiewd width...
<i> </i>@media ( max-width: 24em) { /* this about 384 px, you can adjust value to suit */ .image1 { display: none; } <br/> .image2 { display: block; } }
You can hide the overlapping regions of the image by applying `overflow: hidden;</C> to the wrapping container. However there is one more reason for overlapping content: You positioned your image absolutely; very often this doesn't fix any issue but is the reason for trouble. Omit it.
When having done so there is one issue left: Caused by the rotation there are empty regions in the wrapping container. This can be fixed by enlarging the image by <C>transform: scale();</C>.
.image1 { /* height: 570px; width: 350px; */ transform: scale(1.7) rotate(25deg); /* position: absolute; z-index: 0; float: right; right: 25%; */ aspect-ratio: 35 / 57; width: 100%; }<i> </i>`` Now, as large regions of the image are cut off you would have to adjust the original one that way that there are empty regions at the edges.