How do you make something like this which is iframe and (for example) acts as 1920px width in 1024px container. I need to make users check the page in various display widths on the page rather than using developer tools. Forgive me for my bad English and bad writing skill. I really appreciate your effort and time.
Set your iframe to the actual target width, e.g. say, 1920px, then play with CSS transform:scale:
iframe {
transform: scale(.3);
transform-origin: 0 0;
}
Don't forget your vendor prefixes.
i have list of images i just want to show them horizontally in HTML ,if it reaches width limit it need to add at bottom row
and i have very big images how can i show them small with maintaining aspect ratio
Using CSS3 for example:
.90deg_image_rotation {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
}
It sounds like what you want is something like Freewall. It is a JQuery based plugin to handle the creation and management of grid systems.
Source on Github
Project homepage
An example showing behavior like what you described
You can use CSS.
Float: left;
Will give you the horizontal display you want and
Width: 200px;
Will give you the resize you want although you may need to play with the value to get what you are after.
Note that you should only specify either width or height of the image because that will preserve the aspect ratio. Specifying them both will destroy it unless of course you have some custom js which I have seen before but that's usually very fragile
Let's say I want to to move an element from left to the right, I can achieve this by doing
transform: translate3d(200px,0,0);
/*or*/
transform: translateX(200px);
or
transform: matrix3d(x,x,x,x,x,x,x,x,x,x,x,x,200,x,x,x)
or just set left position.
Why is CSS matrix3d rendered faster than just setting a position left/top?
UPDATE:
CSS animation of top/left vs transform in slow-mo.
high performance animations on HTML5
There are 2 factors than are relevant here
1) Because left can potentially affect all the layout in your page, so it forces a recalculate of style and layout. Transforms do not need this step, the transforms do not afect the element neighbours.
see html5 - high performance animations for a better explanation
2) Because most 3d work is handled by the GPU and not by the CPU. The GPU not only can do that much faster, it also frees the CPU to handle better the rest of the work. You will see a lot of times the style
transform: translateZ(0px);
wich obviously does nothing, but that makes the broser use the GPU and accelerates the process. You could try to measure changes to left with this line added and see what the perfomance is.
So my problem is fairly simple.
When I started to develop my website my default zoom level on my Firefox browser turned out to be, well, less than 100%. (Maybe 70%)
Which means that what I have designed so far is actually in zoomed out mode, which in turn means that my users or web visitors will see something that looks very zoomed in when they look at it with 100% mode.
This can easily be solved by holding Ctrl and scrolling you mouse wheel twice. Obviously though I can't encourage people to do that.
So,
Is there some function or property in either HTML, CSS or Javascript than can set the default zoom level to zoomed out?
I would highly recommend to create your website again !!!
Does it help ?
body { zoom: 3; -moz-transform: scale(3); -moz-transform-origin: 0 0}
Reference
Chrome can display initial zoom levels such as
HTML {
zoom:90%;
}
which would by itself zoom the entire page not the initial browser zoom level, this works like scaling, but it's not compatible with either firefox or safari or my guess. The rest of explorers.
GL
Nop, you can't. That's a browser feature.
My designer believes this cannot be done, however it seems possible to me. (Although I have limited CSS experience). However, he also said the background couldn't be fixed, and stackoverflow has proved his wrong in the past; so I question his knowledge.
JQuery can be used if this cannot be done in pure CSS.
The top half will be a gradient that has full flexible to skew left, right, up, down without much distortion. The bottom half is an image that is ideally made for the 1280 x 1024 resolution (as this is the most popular browser display resolution). Then depending on the requirements needed it will sketch and skew to whatever size it needs. Still allowing all of the image to be seen.
The ration between the top half and bottom half is always 50% 50% independent of browser resolution.
I would also like if both the top and bottom parts are fixed.
In a perfect world (one without IE), id like to do this with css3 gradients and multiple backgrounds in 1 DIV. However, because IE9 isnt out yet, I think the best way to approach it would be 2 divs in a DIV container and using a PNG repeating background for the top div.
It should be noted I am going to use css3pie.com to allow some CSS3 for IE6-8 (but I dont want to rely on it, unless 100% proven)
Is this possible with just CSS? How would you do it?
If not possible with just CSS, is there a way I can get JavaScript/JQuery to aid?
I am thinking a base of 1280 x 1024 isn't the best idea because it seems to have an odd radio.
Edit 1
Oh yeah, I have a WIP too:
http://meyers.ipalaces.org/extra/
It looks good in 1280 x 1024...now its just getting the whole resizing of the top DIV to be 50% so the image is 50%.
I'd still like ALL of the water to be seen, because I like the look of the rocks at the bottom. However, I am open to alternative ideas that don't accomplish what I want 100%, but come close.
Edit 2
How about using the top gradient as the true CSS2 background and then just putting a <img> at the bottom of it to resize? Perhaps that will allow for CSS2 ability. I am reference some work-around techniques here: A list apart
Edit 3
I am still looking for results that work on IE6 and also don't cause Internet explorer to lag. I am setting a bounty of 50 to help attract more attention.
I have successfully came up with 2 ways to do this:
Method 1
Click here to view demo
Using CSS3 background-size I was able to set 2 div elements to on top of each other with min-height: 50% and then using background-size: 100% 50% they successfully accomplish what I am looking for.
This method was just a proof of concept, as IE6-8 does not support background-size, I didn't pursue tweaking this method perfectly. As it stands, it currently messes up when you scroll despite have background-attachment: fixed;. I ditched this CSS3 method in order to look for better methods using CSS tricks...
Method 2
Click here to view demo
Following the examples I found from A List Apart (Article | Example1 | Example2). I used Technique #2 from Example 1, and I was able to emulate what I wanted to do using just CSS2. (I am not 100% sure how or why this works, but it does)
Because I am also going to use CSS3PIE to give IE6-8 CSS3 the ability to do linear gradients, border-radius, and box-shadow; I opted to use a linear gradient instead of an image for the top background.
Problems
CSS2 Method from Technique #2, Example 1 does not work with IE6 Correctly
Creates excessive lag in all current Internet Explorers
It can be done with CSS only. No PIEs necessary. Just an IE6 bug and some filter magic.
Demo:
http://www.bundyo.org/test/FPB.html
Do this using raphaeljs. Create a background DIV that becomes a canvas, draw a rect to 50% of the page height (if using jquery then use $(window).resize() to monitor for a window resize and $(window).height() to get the 50% into pixels).
You can fill in the raphealjs rect with specifing it's fill value to something like fill: "90-#000000-#ffffff"
As for the image:
Place the image using raphealjs' image OR just embed it using HTML and update it's height-scale using jquery as mentioned above.
I've done something like this just recently using about 10 lines of code.
Also: Change your water.png, it's about 275kb, where as the next largest file on your page (the css) is like 1.5kb.
If you want to keep the horizon of the water at 50% on your screen, I would suggest a simpler method;
Create an image (probably about 1280 wide) in Photoshop of water on bottom and gradient on top. Fade the top gradient into a solid light blue(#68b for example). Fade the left, right and bottom of the image into the same solid color(#68b).
Set the background of your page as follows;
html {
background: #68b url(waterimage.png) center center no-repeat;
}
In your case, you'll probably want to apply the background to #wdth-100 instead of html, but it all depends on which element you want to put your background on.
All done. Let me know if that works for you.
I don't have a link to your top image, so i used the same image for top and bottom.
You should probably use a CSS solution for normal browsers and the JS for IE.
<script type='text/javascript'>
$(document).ready(function() {
wh=$(window).height();
ww=$(window).width();
if(wh%2) {
h1=Math.round(wh/2);
h2=Math.round(wh/2)-1;
} else {
h1=h2=wh/2;
}
img1=$("<IMG/>",{'src':'http://meyers.ipalaces.org/images/bottom-bg.jpg','id':'img1'} )
.css({'width':ww,'height':h1,'top':'0','left':'0','position':'absolute','z-index':'-100'});
img2=$("<IMG/>",{'src':'http://meyers.ipalaces.org/images/bottom-bg.jpg','id':'img2'} )
.css({'width':ww,'height':h2,'top':h1,'left':'0','position':'absolute','z-index':'-100'});
$(document.body).append(img1);
$(document.body).append(img2);
});
$(window).resize(function() {
wh=$(window).height();
ww=$(window).width();
if(wh%2) {
h1=Math.round(wh/2);
h2=Math.round(wh/2)-1;
} else {
h1=h2=wh/2;
}
$('#img1').css({'width':ww,'height':h1,'top':'0','left':'0'});
$('#img2').css({'width':ww,'height':h2,'top':h1,'left':'0'});
});
</script>
The pragmatic answer would seem to be to do it using multiple divs with their own background, all of which would be positioned absolutely and behind everything else using z-index.
I know that's not the clean markup solution with a single div with some magic CSS, but this is a tricky problem in pure CSS in any browser, and almost certainly impossible if you need to support IE6.
An even more pragmatic answer would be to say "I'll support IE6 as far as I can, but if it can't support my lovely background effect then that's just tough luck for anyone still using it".