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
Related
I just want to know with the experience of the others which solution do you use generally to position an element out of the natural flow?
- Transform: translate
- Position: Absolute.
Thank's :)
All depends.
position:absolute actually can work together with transform:translate. For example, if you want to place a div (dynamic height/width) you can do below:
<div id="mydiv">
<!-- Dynamic content here meaning height and width could change -->
</div>
#mydiv {
position: absolute;
top: 50%; /* Top of element would appear in the centre */
left: 50%; /* Left of element would appear in the centre */
transform: translate(-50%, -50%); /* Bring the element centre to area centre */
/* I'm lazy to make above lines cross browser but you shouldn't */
}
In above case, if the parent element is the full height and width of the window, the box will stay in the centre.
Hope this give you some inspirations.
position : absolute
*this does pose issues for responsive pages.
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.
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/
I've got a <span class="name"> next to an <img> inside a <div>. Inside this span I have some text which I want to turn 90 degrees. However, when I do this (as code suggests below) the span ends up in a somewhat weird position on top of the image.
In IE, the text doesn't rotate at all.
.name {
display: block;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
Any suggestions as to how I solve this?
I've fixed this on my own what I needed to do was put a fixed size on the span and then use position:absolute; to position it where I wanted it
I'm not sure how to fix it. But the reason it doesn't rotate in IE is that you are using "webkit" and "moz" to rotate - which are firefox-like-browser specific functions. You'll have to google for an IE-equivalent.
I have this page and I have users uploading an icon image for the industries and they are uploading a bigger image. I want to resize it via CSS and it's cutting it when changing it in Firebug. To see what I mean, select "retail" from the top dropdown "Select Industry Category" and then select "General" from "Select Business Type" and you will see the oddly shaped image. It needs to be 56 pixels * 52 pixels.
Here is my HTML:
<span class="icon select-business-icon" style="background-image: url(http://posnation.com/shop_possystems/image/data/icons/retail.png);"> </span>
I tried in the CSS to set the width and height to the desired measurements, but all it did was truncate the image and not resize.
Here's what I've done:
.resize {
width: 400px;
height: auto;
}
.resize {
width: 300px;
height: auto;
}
<img class="resize" src="example.jpg"/>
This will keep the image aspect ratio the same.
You can resize images using CSS just fine if you're modifying an image tag:
<img src="example.png" style="width:2em; height:3em;" />
You cannot scale a background-image property using CSS2, although you can try the CSS3 property background-size.
What you can do, on the other hand, is to nest an image inside a span. See the answer to this question: Stretch and scale CSS background
CSS 3 introduces the background-size property, but support is not universal.
Having the browser resize the image is inefficient though, the large image still has to be downloaded. You should resize it server side (caching the result) and use that instead. It will use less bandwidth and work in more browsers.
You can try this:
-ms-transform: scale(width,height); /* IE 9 */
-webkit-transform: scale(width,height); /* Safari */
transform: scale(width, height);
Example: image "grows" 1.3 times
-ms-transform: scale(1.3,1.3); /* IE 9 */
-webkit-transform: scale(1.3,1.3); /* Safari */
transform: scale(1.3,1.3);