I have a div containing an image, I want to rotate the image. After rotation the image should cover the parent div, overflow would be hidden. I have two pictures of what I get and what I want (lack of reputation doesn't allow me to embed the pictures):
.parent {
position:relative;
display:inline-block;
width:100%;
max-width:480px;
overflow:hidden;
}
.background{
width:100%;
height:auto;
}
.grafic {
position:absolute;
z-index:1;
top:0;
left:0;
width:100%;
max-height:360px;
height:auto;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
<div class="parent">
<img class="grafic" alt="" src="img.gif"
<img class="background" src="gfx/missingpicture.gif">
</div>
As you can see, I can rotate the image, but the image isn't fully covering the parent div. I couldn't find anything to this exact problem.
Some thoughts:
One could use JQuery to calculate the necessary height/width to cover the parent div, but I hate using JS/JQuery if a pure CSS solution is possible (I can do a JS solution by myself, but I still suck at CSS).
I use PHP (I'll know the degree), so precalculating stuff can be done, but the parent div becomes smaller on smaller screens. A fix width would kinda suck then..
I can't think of CSS-only solution, so here's something with JS that I've used before.
You don't need to do the maths yourself in order to get the dimensions of your transformed object.
Instead you can use the Element.getBoundingClientRect() method which returns the height and width of the element after the transformation.
Once you have the dimensions, it should be easy to adapt the parent dimensions to fit the rotated image.
Here's a DEMO.
Also this other question has working solution which does what you want.
I hope it points you in the right direction.
I do not required reputation for posting a comment so I am posting as a comment. I am only addressing the sizing options for the image.
Say your image has width=w and height=h. Then if the size of the outer quadrilateral will have size
sqrt(w*w + h*h)
. Please note that the outer image will not be a square if inner image is not a square.
Related
I want to animate some sort of floating div.
When the div is in the status 'close' , most of it is hidden on the right of the screen, with only 20px still visible.
When I click on the visible part, the div move to the center of the screen, revealing itself.(it's what I call the status open)
My issue are:
I only know how center a div with margin:auto, which do weird stuff when I animate it
when the div is 'closed', the 'hidden' part create an overflow who add a scrolling. I don't want that
the div have a width who change a lot, depending of the case. Consequently, I cannot use a lot of hard coded value in CSS.
Any idea how to do this?
Even a partial solution would help me.
Edit : the solution (thanks to #sonic)
.open{
translateX(-50%);
left:50%;
}
.close {
translateX(-20px);
left:100%;
}
Its too open question to be able to help with 2,3 points, its hard even to say what is the objective and without code, who knows...
Centering div like that:
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
you can easly animate those properties.
This question has been asked and answered in portions, but I can't seem to find an answer in full. I have a responsive div in bootstrap, and I (1) want my canvas to display with the same position and dimensions, and (2) want my text to appear above the canvas.
<div class="col-md-9 content-wrapper>
<canvas id="canvas" resize="true"></canvas>
<p class="statement">Display this text over canvas</p>
</div>
css:
.statement{
position:relative;
top:50%;
transform: translateY(-50%);
}
#canvas{
width:100%; height:100%;
}
Any advice? I know I'll need some sort of position css on the canvas, but I don't know what, and absolute positioning will give me problems with it's responsiveness. I'd also like to stay away from extra javascript for positioning, but if someone could explain a way that won't make it buggy, I'd be open to the suggestion.
Thanks!
You place
position: relative;
On the background div.
Place
Position: absolute;
On the foreground div and position with top, bottom, left, right. The foreground container will work relative to the background, meaning it is responsive, if you set the width of the foreground using %
I'm working on a mobile version of my website, and I'm having trouble vertically-centering two divs. Since it is a mobile site, my css needs to work on any type of screen resolution, so this is where I'm having the problem. Also, different images will be used depending on what page you are on, so the resolution of the image is not static either. I need a way to center both my image div and text div no matter their height or width.
I've made a fiddle here to start out with. As you can see, I chose the green area to be the "screen" for the phone, and I want both the picture to center vertically, and the text to be on top of the picture and center vertically as well. Any help?
What I have so far... (in my jsfiddle)
HTML:
<div id = "screen">
<div class = "overlay" id = "picture"><img src = "http://www.startingtofeelit.com/wp-content/uploads/2013/10/Tennis-Mean-Streets.jpg" /></div>
<div class = "overlay" id = "text">This is where the text would appear</div>
CSS:
#screen {
width:360px;
height:640px;
background-color:#0f0;
position:relative;
overflow:hidden;
display:table-cell;
vertical-align:middle;
}
.overlay {
position:absolute;
top:0;
left:0;
}
#picture {
}
#picture img{
width:100%;
}
#text {
background-color:#000;
width:100%;
opacity:0.5;
color:#fff;
}
For vertically centering you can set margin top/bottom to auto.
If I understand where you want the text, this should work.
Html
<div id = "screen">
<div class = "overlay" id = "text">This is where the text would appear</div>
<div class = "overlay" id = "picture"><img src = "http://www.startingtofeelit.com/wp-content/uploads/2013/10/Tennis-Mean-Streets.jpg" /></div>
</div>
and css
#screen {
width:360px;
height:640px;
background-color:#0f0;
position:relative;
overflow:hidden;
display:table-cell;
vertical-align:middle;
}
#picture {
margin: 0 auto;
}
#picture img{
width:100%;
}
#text {
position: absolute;
top:50%;
background-color:#000;
width:100%;
opacity:0.5;
color:#fff;
}
So it doesn't seem like there is a pure css way to do it, so I ended up using jQuery instead. I made a fiddle in case you want to see how I did it, but the jist of it was this.
On document load, find any item with class "overlay" and apply a negative margin-top of half it's height to center it. Because it already has a position of absolute and top:50%, this will vertically center the item.
$(document).ready(function(){
$(".overlay").each(function(){
$(this).css("margin-top", $(this)[0].scrollHeight/2*-1);
});
});
It's pretty simple, and I wish there was a way to do it in pure css, but this way works as well. Thanks for all the help.
After the discussion in the comments I've determined this question is not nearly thought out well enough to attempt to answer and so this will stay simply in hopes that someone else that finds this page is helped by the answer
:::Initial answer:::
This question is easily much more difficult than you've made it seem. If it's a matter of fitting the image to the viewport of the device there is no single css solution and a javascript solution will be needed.
Let me explain, if the image is much taller than it is wide then to fit the image to the screen you'd want to set the height to something like 90% of the height (give some padding for the text etc). however since the image is variable size if the width is the greater value you'll want the width to something like 90%. Herein lay the problem, you wont want both the height and the width of the image to be 90% as that would distort the image. So there will need to be some javascript to flop around some classes here.
After that the css gets a bit hairy also, if you're looking for an overlay to display the same based on any position the user clicks on an image (assuming this is a sort of gallery) rather than an absolute positioned item at the top and left of the document you'll want a position: fixed; element which is positioned on the viewport.
All described before would need a bit of javascript again because there is no easy way to center something that is fixed without using negative margins of half its width/height.
An example of such a thing is here:
http://jsfiddle.net/5hHMa/2/
Here we have the css for the very fixed case which you have presented.
.overlay {
position:fixed;
top:50%;
left:50%;
margin-top: -150px;
margin-left: -150px;
}
#picture img{
width: 300px;
}
#text {
background-color:#000;
opacity:0.5;
color:#fff;
}
Ideally what you would do is instead of using a fixed value for the margins and width as I have you would determine these values and set them using javascript.
It is hard to form a complete solution for your problem with the limited information given, however hopefully this gives you a push in the correct direction.
I have many images inside my div where I position them so that all are complete each other’s.
Also I need that when I copy the div to other page the images sty the same but I can modife where to put the div in my page
Now my problem is:
I want these entires images inside the div to be smaller and still are complete each other
Example of My code:
<div style="position:absolute; top:900px; left:500px" >
<img id="Burimi" style="position:absolute; left:10px" src="Images/Reagion/Burimi-B.png"/>
<img id="" style="position:relative; left:98px;top:1px;" src="Images/Reagion/N Batinah-B.png" />
</div>
Example:
You can resize the container and not the images. For example you can use the following for the parent div:
div {
transform: scale(.5,.5); /*Half width and height */
-ms-transform: scale(.5,.5); /* IE 9 */
-webkit-transform: scale(.5,.5); /* Safari and Chrome */
-o-transform: scale(.5,.5); /* Opera */
-moz-transform: scale(.5,.5); /* Firefox */
}
Sounds like you'd be better using an image map. Have one image containing all the images as you'd expect them to be displayed on the page, then use areas to differentiate between the different regions on the image.
Use position:relative in the div, and position:absolute for all the images.
This way you can put the div anywhere and the images Will always be positioned relatively to the div
Problem: css3 transforms applied to a child element inside a div are ignored by the browser (FF5, Chrome12, IE9) when calculating the scrollHeight and scrollWidth of the containing div's scrollbars when using "overflow: auto;".
<style type="text/css">
div{ width: 300px;height:500px;overflow:auto; }
div img {
-moz-transform: scale(2) rotate(90deg);
-webkit-transform: scale(2) rotate(90deg);
-ms-transform: scale(2) rotate(90deg);
}
</style>
<div><img src="somelargeimage.png" /></div>
I have put together a small test on jsfiddle showing the undesired behavior.
http://jsfiddle.net/4b9BJ/
Essentially I am trying to create a simple web based image viewer using css3 transforms for rotate and scale and would like a containing div with fixed width/height to be able to scroll to see the full content of the image it contains.
Is there an intelligent way to handle this issue, or even a rough workaround? Any help is appreciated.
I added an extra div to each of the transformations and by setting fixed widths for those divs and clipping overflow I manged to make them the correct size. But then I had to use position: relative and top: blah; left: blah to shift the images into the correct position.
http://jsfiddle.net/4b9BJ/7/