/    Sign up×
Community /Pin to ProfileBookmark

rotated image inside
comes out of div block

I have created two div and in second div i have attached an image and rotated it. But the image overlaps the content in first div.

https://ibb.co/JF3h9Hb

to post a comment
CSSHTML

9 Comments(s)

Copy linkTweet thisAlerts:
@cootheadAug 05.2022 — Hi there aaayush_kr,

and a warm welcome to these forums.

Using CSS to rotate the image gives it absolute positioning

and therefore cannot be confined by it's container.

What you need to do is rotate it by 25 degrees in your image

editor and then save it as a png or webp.



[i]coothead[/i]
Copy linkTweet thisAlerts:
@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...???
Copy linkTweet thisAlerts:
@aaayush_krauthorAug 05.2022 — ``<i>
</i> &lt;div class="row"&gt;
&lt;div class="col-lg-6"&gt;
&lt;h1&gt;Meet new and interesting cats nearby.&lt;/h1&gt;
&lt;button type="button" class="btn btn-dark btn-lg download-button"&gt;&lt;i class="fa-brands fa-apple"&gt;&lt;/i&gt;
Download&lt;/button&gt;
&lt;button type="button" class="btn btn-outline-light btn-lg download-button"&gt;&lt;i
class="fa-brands fa-google-play"&gt;&lt;/i&gt; Download&lt;/button&gt;
&lt;/div&gt;
&lt;div class="col-lg-6" id="cat-image"&gt;
&lt;img class="image1" src="images/iphone6.png" alt="iphone-mockup"&gt;
&lt;/div&gt;
&lt;/div&gt;<i>
</i>
`</CODE>

//CSS
<CODE>
`<i>
</i>.image1 {
height: 570px;
width: 350px;
transform: rotate(25deg);
position: absolute;
z-index: 0;
float: right;
right: 25%;}

.container-fluid { padding: 3% 15% 7%; }

.download-button {
margin: 5% 3% 5% 0%;
padding: 3%;}<i>
</i>
``
Copy linkTweet thisAlerts:
@aaayush_krauthorAug 05.2022 — @coothead#1645654

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..
Copy linkTweet thisAlerts:
@SempervivumAug 05.2022 — @aaayush_kr#1645657

Single backticks (probably created by the button `&lt;/&gt;</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.
Copy linkTweet thisAlerts:
@cootheadAug 05.2022 — > @aaayush_kr#1645658

> 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>&lt;div class="col-lg-6" id="cat-image"&gt;
&lt;img class="image1" src="images/iphone6.png-rot" alt="iphone-mockup"&gt;
&lt;img class="image2" src="images/iphone6.png-vrt" alt="iphone-mockup"&gt;
&lt;/div&gt;

...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;
}
}


[i]coothead[/i]
Copy linkTweet thisAlerts:
@SempervivumAug 05.2022 — @aaayush_kr#1645653

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>.

Resulting CSS
<CODE>
`<i>
</i> #cat-image {
overflow: hidden;
}

.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.
Copy linkTweet thisAlerts:
@cootheadAug 05.2022 — Hi there aaayush_kr,

I thought that it might be helpful if I gave you

a rather more detailed example to examine...

[b]Full Page View[/b]

https://codepen.io/coothead/full/JjLvOKB

[b]Editor View[/b]

https://codepen.io/coothead/pen/JjLvOKB

You will find that it works well from full size to under

18.75em - ( 300px ) - screen width.

The vertical image comes in at 28em - ( 448px ).

[i]coothead[/i]
Copy linkTweet thisAlerts:
@shahariar71Aug 07.2022 — Rotate image online. In Images | Keywords | Thanks to... Keywords: images pictures photographs photos rotates rotating clockwise counterclockwise.
×

Success!

Help @aaayush_kr spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 3.28,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,

tipper: Anonymous,
tipped: article
amount: 10 SATS,
)...