Spin picture and optimize margins

Question

Spin picture and optimize margins

I need help rotating an image by 90 degrees that is positioned between two boxes. The issue I am facing is that the rotated picture overlaps with the two boxes in this scenario.

Example 1: Incorrect formatting

CSS:

.box{
    height:50px;
    width:200px;
    background-color:blue;
}

HTML:

<div class='box'>Top</div>
    <img style='transform: rotate(90deg);' src='https://cdn.pixabay.com/photo/2017/12/10/20/56/feather-3010848_960_720.jpg' width='200px'>
<div class='box'>Bottom</div>

Example 2: Preferred formatting

There is a workaround available, but it cannot be used universally as "image-orientation" may not be supported by all browsers, especially on mobile devices:

<div class='box'>Top</div>
    <img style='image-orientation: 90deg;' src='https://cdn.pixabay.com/photo/2017/12/10/20/56/feather-3010848_960_720.jpg' width='200px'>
<div class='box'>Bottom</div>

Are there any other solutions to prevent a rotated image from overlapping other elements? Or is there an alternative for image-orientation that is universally supported by all browsers?

css image rotation overlap adjustment

Answer 1

Answer №1

If you want to ensure that the image stays within a specific width while maintaining its aspect ratio, you can achieve this by surrounding the image with a div tag and using CSS to set up a 1:1 aspect ratio based on the maximum width of the container. By absolutely positioning the image inside the div, you can rotate it around a central axis point. Here is an example of the code:

<style type="text/css">
.box{
    height:50px;
    width:200px;
    background-color:blue;
}
.box--image {     
    position:relative;    
    max-width:200px; 
    outline:solid 1px red;
}

.box--image:before {
    content:"";
    display:block; 
    padding-top:100%;
}

.box--image img {    
    left:50%;
    position:absolute;          
    top:50%;
    transform:rotate(90deg) translate(-50%,-50%);
    transform-origin:top left;
    width:200px;
}

<div class="box">Top</div>
    <div class="box--image"><img src="https://cdn.pixabay.com/photo/2017/12/10/20/56/feather-3010848_960_720.jpg" /></div>
<div class="box">Bottom</div>

Answer 2

If you want to ensure that the image stays within a specific width while maintaining its aspect ratio, you can achieve this by surrounding the image with a div tag and using CSS to set up a 1:1 aspect ratio based on the maximum width of the container. By absolutely positioning the image inside the div, you can rotate it around a central axis point. Here is an example of the code:

<style type="text/css">
.box{
    height:50px;
    width:200px;
    background-color:blue;
}
.box--image {     
    position:relative;    
    max-width:200px; 
    outline:solid 1px red;
}

.box--image:before {
    content:"";
    display:block; 
    padding-top:100%;
}

.box--image img {    
    left:50%;
    position:absolute;          
    top:50%;
    transform:rotate(90deg) translate(-50%,-50%);
    transform-origin:top left;
    width:200px;
}

<div class="box">Top</div>
    <div class="box--image"><img src="https://cdn.pixabay.com/photo/2017/12/10/20/56/feather-3010848_960_720.jpg" /></div>
<div class="box">Bottom</div>

Spin picture and optimize margins

Example 1: Incorrect formatting

Example 2: Preferred formatting

Answer №1

Similar questions

What's the best way to ensure that my image remains perfectly centered at the point where the background colors of my

Adjust the color of the font within a div element when hovering over it

Decrease the size of the "subscribe" button

Creating an HTML element using jQuery isn't just about designing; it

Executing a jQuery script on various elements of identical types containing different content (sizes)

Using bootstrap's center-block class, you can easily center

"Addressing the issue of white space between the status bar and header in Cordova

Include various categories into the div containers of the listed items within the query outcomes

Styling the tab view in PrimeFaces

Bootstrap tab content getting shifted downwards

Dynamic background image that fills the entire webpage, adjusts to different screen sizes, and changes randomly

Is there a way to disable a JavaScript hover effect when the mouse moves away?

Begin an unnumbered hierarchical list commencing at 1.2.1

Navigate to the top of the page using jQuery

SVG padding will only take effect if two or more sides are specified

How to center multiple divs in a row using HTML and CSS

How can I modify the color of a div when a validation error occurs?

Is there a way to align text in the middle of a full-width jumbotron using bootstrap 4 while also restricting the maximum width of only the div or p container?

What is the best way to adjust the z-index of a dropdown auto complete to appear above a background image?

I need to display 5 columns in a parent component, each with its own unique icon. How can I conditionally render them in a React component?