I've created a page that scales large images to fit the window, however it does not allow the user to zoom once the image is loaded and scaled to fit. I want the initial view size to be as realized by the css as shown below, but thereafter I want the user to be able to zoom (or pinch-zoom on mobile/touch-screen devices), as well as Ctrl+0 to return to the initial view size. How can I accomplish this? Here's the complete code:
<!DOCTYPE html>
<html>
<head>
<style>
img {
position: fixed;
max-width: 100%;
max-height: 100%;
top:0;
left:0;
bottom:0;
right:0;
margin: auto;
}
</style>
</head>
<body>
<img src="LARGE_IMAGE.jpg">
</body>
</html>
You should make width on viewport. Device width wouldn't change after that anyway.
Related
I am trying to create a background image that will have a scroll bar to scroll the image down vertically. I like the idea of using width and height percentages because it seems like this method always fits the image to any screen resolution. Unfortunately, the length of the image is rather large and therefore the bottom of the image gets cut off. I have tried various ways to get this working including changing the background-size properties, using overflow-y:scroll and other edits that are not worth mentioning. Here is the code I am working on thus far:
HTML
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
<meta charset="UTF-8">
</head>
<body>
<div class='image'></div>
</body>
</html>
CSS
#charset "UTF-8";
/* CSS Document */
body {
margin:0;
}
.image {
position:absolute;
width:100%;
height:100%;
background:black;
background-image:url(../pictures/testjpg);
background-size:cover;
overflow-y: scroll;
}
UPDATE: without height you can't scroll the image top to bottom. but you cant fit this any screen.
body,html {
margin: 0;
}
.image {
background-image: url("http://www.w3schools.com/howto/img_parallax.jpg");
background-position:center;
background-size: 100% 100%;
height:300vh;
}
<body>
<div class="image">
</div>
</body>
A scroll bar moves the viewport so that you can see what's not on the screen. At the above code, if you make your image to expand&contract by giving it relative height (%100 height&width of the screen), there will never be a 'scroll-able' vertical scroll bar because there's nothing to scroll to. It never 'overflows'.
To actually have scroll-able images, you need to give it a width - or in this case- height larger than your viewport.
I've been reading quite a bit of answers on this, but simply cannot get it to work. I thought I'd provide a full example, and hopefully I'll get an answer that works for me.
I have this image, bckg.png, size 1200x1920, created with Imagemagick convert -size 1200x1920 gradient:tomato-steelblue -distort SRT 60 bckg.png (click for full size):
I want this displayed in the center of the browser window, such that it is scaled according to the smaller dimension of the browser window, so the aspect ratio is preserved.
For instance, if the available browser window page area is 887x487, the smaller dimension is the height -- so I'd like the image height scaled to 487px, and preserving aspect ratio, its width would then be 487*(1200/1920) ≈ 305 px
So, I'm trying the following code, temp.htm:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
html,body { height:100%; }
/* convert -size 1200x1920 gradient:tomato-steelblue -distort SRT 60 bckg.png */
#background {
background: url(bckg.png) no-repeat center center fixed;
background-size: cover;
height:100%;
}
</style>
</head>
<body>
<div id="background">
</div>
</body>
</html>
In Firefox 42, this renders as:
However, what I would have wanted instead, should approximately look like this (I montaged this in an image editor):
... and basically, regardless of how I resize the browser window, the entire image should be shown inside it, centered.
How can I do this with HTML/CSS? (pre-css3 answers are appreciated as well)
Just switch the background-size to contain instead of cover JS Fiddle
#background {
background-size: contain;
** Note that if you want to get rid of the few white pixel margin around on your page top, right, bottom and left sides add this to your body css:
padding:0;
margin:0;
I'd rater prefer this one:
html, body {
height:100%;
padding:0;
margin:0;
}
#background {
background: url('http://i.stack.imgur.com/8H1yb.png') no-repeat center center;
background-size: auto 100%;
height:100%;
}
in order to obtain a larger compatibility width IE (i didn't test on older version but it should be 7+, maybe 6+)
http://jsfiddle.net/sqdkyaot/4/
This is what I have so far for rendering an image that's 800 x 534 pixels. So far I have it scaling properly for users with smaller screen sizes and I am able to set a maximum image size for larger screen sizes.
I'm just curious as to how to modify this code so it works with as many browsers as possible, If there's an innerwidth or innerheight option I could use without relying on javascript then I'd go for that.
The reason I ask is because when I scale the image on the small screen, I still have to scroll the page about the same number of pixels as the height of the browser decorations regardless of which browser I use, and I want to avoid the requirement to scroll to see the whole image.
<html>
<head>
<style>
IMG {width: 100%;height: auto; max-width:800px; max-height:534px;}
</style>
</head>
<body>
<img src="image.jpg" width=800 height=534>
</body>
</html>
Try this https://jsfiddle.net/2Lzo9vfc/10/
CSS
img {
width: 100%;
height: auto;
max-height: 100vh;
max-width: 100vw;
}
If your image is fixed size find on what window size it goes to scroll and use media queries to fix it.
I'm making a few HTML pages specifically for iPad Air and iPad Mini. The pages will have few larges images, for example of the size of 1600x300. But as per the code which was written by me the images are too big to be on the screen, it goes beyond the screen while testing in Windows browsers. Code as shown below:
<div class="wrapper">
<div class="image1"></div>
<div class="image2"></div>
</div>
.wrapper {
width: 100%;
height: 100%
}
.image1 {
width: 1600px;
height: 300px;
top: 100px;
left: 100px
}
.image2 {
width: 1700px;
height: 300px;
top: 450px;
left: 100px
}
The width and height of div are set the same as width and height of the image. The images size were specifically designed for iPad, I can't change the size.
If I give the actual resolution of iPad for .wrapper as shown below the images will get positioned correctly when I test I the browser setting the screen size to 1024x768 (logical resolution of iPad).
.wrapper {
width: 2048px;
height: 1536px
}
I want the image to adapt to all screen as well as iPad by giving 100% width and height to wrapper class so that even in the portrait mode of iPad I can view it without any fluctuations. Please tell me how to achieve this.
Thanks
OP hasn't clarified why they're using DIVs. Maybe there's going to be content laid over it? Until OP provides clarification I'm going to provide the standard responsive image solution.
If you don't have to use DIVs, try this:
<img src="http://placehold.it/1600x300">
<img src="http://placehold.it/1600x300">
img {
display: block;
max-width: 100%;
}
jsFiddle: http://jsfiddle.net/rwzn2db6/
UPDATE
Note: I cannot tell if you're also looking for a 100% height option or just need the widths to be a 100% width and scale.
If you'd like to use DIVs you could use background-size: cover along with the appropriate amount of padding-bottom for each image DIV. The padding on the bottom of the DIV is based on the image's height to width ratio expressed as a percentage.
<div class="container">
<div class="img-1"></div>
<div class="img-2"></div>
</div>
.container > div {
background-size: contain;
}
.img-1 {
background: url('http://placehold.it/1600x300/') no-repeat;
padding-bottom: 18.75%; /* 300/1600 * 100 = 18.75 */
}
.img-2 {
background: url('http://placehold.it/1600x300') no-repeat;
padding-bottom: 25%; /* 400/1600 * 100 = 25 */
}
jsFiddle: http://jsfiddle.net/5kjtdhmn/
Either of the solutions offered above may not be a 100% what you're looking for as it is hard to tell what the proper context and final objective is.
Add max-width: 100% and height:auto to your images
May be you need to adjust size (width-height) of pages according to the device, so you might need the following tag added to your section of your HTML.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
......
......
content="width=device-width" will adjust screen resolution automatically'initial-scale' value used to set zoom level of page.
First of all, what's with people saying stuff isn't an answer? Expecially when it is? Wtf.
Second of all, another acceptable answer on top of what was already said by DigitalDouble, would be to set the image to have the
Background-size:cover; and set the image with css background-image property.
I would remove the pixel sizes entierly and just set it to 100% width and height, with position Absolute to be able to lay other content on top of it.
I'm trying to put a image background in a fullscreen div.
What's working:
load the code in a browser
reload the page
the background should display correctly
The problem:
load the code in a Chrome browser
make sure the page is scrolled down
reload the page
the background is mangled
I would not using the <html> tag as I need to swap the background and do animations which would corrupt the html.
<!DOCTYPE html>
<html>
<head>
<style>
html, body, #background { height:100%; margin:0px; }
#background{
width:100%;
top: 0;
position: fixed;
background: url(http://lorempixel.com/400/200/sports/) no-repeat center center #fc0;
background-size: cover;
background-attachment: fixed;
z-index: -1;
}
#content { background: #0cf; width:400px; height:2000px; margin: 0 auto; }
</style>
</head>
<body>
<div id="background"></div>
<div id="content">The content</div>
</body>
</html>
Please note I'm not using JSfiddle as to test this behaviour we actually need to reload the page.
Here's some images, sorry for the delay in my reply!
1) Here is what happens when I first load the page
2) When I scroll down
3) If, while my scrollbar is down, I reload the page I get this!
The background image is distorted by default as the background image is very small 400 x 200 px.
I don't see any difference when reloading the page except that the image is changing.
Have a better resolution image to avoid distortion in bigger screens