I have a DIV that is changing size depending on the browser window. I have an image inside of it which in effect will essentially fill up the entire browser window, and I need it to resize without stretching out of proportion when the window gets too wide or too long.
Additionally I need to have the image centred so you see the 'sweet spot' of the image when it becomes too big for the browser window.
I've been searching for ages and trying many different things but I can't work it out for the life of me. Perhaps it could be solved with Javascript or jQuery?
This is the CSS I have so far of the DIV id and the IMAGE class:
#VisitUsSlides {
height:100%;
width:100%;
position:absolute;
top:0px;
left: 0px;
}
.resizingImage {
width:100%;
min-width:100px;
min-height:100%;
position:fixed;
top:0;
left:0;
}
It's scaling up and down but starts to 'squash' horizontally when the window gets to thin, and it isn't centering.
Give it a try
<html>
<head>
<style type="text/css">
div
{
width:100%;
height:100%;
background-image:url('sample.jpg');
background-repeat:no-repeat;
background-attachment:fixed;//**Edit: Add this and check**
background-size:cover; //Edit2: Add this and check
background-position:center;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
Hope this solves your problem.
assuming the div have an id named
imageholder
#imageholder{width:500px;height:500px;position:relative;}
#imageholder>img{width:90%;height:90%;position:absolute;z-index:10;top:5%;left:5%;}
hope that helps
also while re-sizing the div. set the image max-height and max-width to its original dimension.
img {
margin : 0 auto;
display:block;
}
give it a try.
position your div as you want.
Try this JavaScript:
http://jsfiddle.net/Teak/6yxcG/
I'm not sure it's what your looking for but it could be expanded/edited, to be better. I'm not completely certain about what it is your after.
Edit: Try this full page version: http://www.teaksoftware.com/html/
There's a CSS3 property but i'm not sure about the support it has.
.resizingImage {
height: 100%;
width: 100%;
object-fit: contain; /*OR*/
object-fit: fill; /*there's also an object-position property*/
}
This prevents the image from being stretched.
Given that it's only ONE line of CSS you can try it out.
Related
I have a div with a simple width, height, background color, and margin:0 auto yet it won't show up and I can't figure out why. In Dreamweaver, it actually shows up just fine, but not in browsers. This is becoming problematic because I need it to center other content (the only reason I gave it a colored background and didn't put anything inside was to troubleshoot). The page with the problem is here. My code is below
HTML
<div id="7steps"></div>
CSS
#7steps {
width:1100px;
margin:0 auto;
height:1000px;
background-color:#960;
}
It has to be some sort of conflicting code that I'm not seeing.
An ID can't start with a number, and height and width doesn't really apply without a position
<div id="steps7"></div>
and
#steps7 {
width:1100px;
margin:0 auto;
height:1000px;
background-color:#960;
position: relative;
}
FIDDLE
I am looking for a way to create a div with height and width of the current browser window size.
This should work even if the window is re-sized.
The fullscreen div shall be followed by even more content.
I am using Bootstrap3 - But I am not sure if this changes anything.
It is pretty easy to get this working in Firefox/Chrome/IE
.fullscreen {
min-height: 100%;
min-height: 100vh;
height: 100%;
width: 100%;
width: 100vw;
height: 100vh;
}
This does not work on Safari.
So I came up with some js
$('.fullscreen').css({
width: $(window).width(),
height: $(window).height()
});
This works on all Browsers (At least all Browsers I've tested). Resizing the window does not work, as the width and height is fix. I could create a Listener that reacts on Window Size changes (I have not looked it up - but this should work).
I don't like the idea of using js to set css.
Isn't there a best practice? This should be possible using css only, shouldn't it? The solutions I've found on the web, were not satisfying.
Something like this?
You need to set the dimensions of both the viewport (html) and content (body) to 100%, then by giving a div a height and width of 100% it will be calculated relative to the viewport, giving the functionality you require (always filling it even on resize).
Feel free to ignore the huge parrot picture in the example, I added it because often in such layouts the first div includes a responsive image.
HTML
<div></div>
<div>More Content</div>
CSS
html, body {
height:100%;
width:100%;
position:relative;
margin:0;
padding:0;
}
div:first-of-type {
height:100%; /* <-- keep the div 100% of the viewport height */
width:100%; /* <-- keep the div 100% of the viewport width */
background-image:url(https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSbcnkIVXLz23PALu8JD-cTGe8KbXKC1JV0gBM_x1lx3JyaNqE7);
background-size:cover;
background-position:center center;
}
div:last-of-type {
background:green;
position:relative;
color:white;
height:100%;
}
I am confused by the size of the <html> reported by Chrome browser.
I am working in full-screen with screen resolution 1360x768. I use this css to put the full screen image on the background:
bg-img { position:absolute; top:0; left:0; width:1360px; height:768px; }
Unfortunately this doesn't show up the image on full screen, and is smaller. I go for the inspect element on <html> markup and see size like 1790 x 768. Computed size reported by Chrome:
display: block;
height: 768px;
width: 1790.6666259765625px;
What I found this works OK in --chrome-frame mode (width: 1360px, but have another problem with extensions so cant use that)
What is going on?
The solution with % even if works OK for background image, doesn't solve my problem because I have other absolute elements on this background and I can't position them with %, because it is not enough precise.
I though that maybe reported 1790.6666259765625px is caused by my extended desktop and 2'nd monitor, but after disabling the same problem.
Instead
bg-img { position:absolute; top:0; left:0; width:1360px; height:768px; }
Try to do this:
bg-img { position:absolute; top:0; left:0; width:100%; height:100%; }
It always works to me and will work in different monitors.
Good luck!
You want CSS3 background-size which allows you to adapt the image ratio regardless of the screen resolution. Make sure you match the CSS selector and adjust the URL to the image you are using...
.bg-img
{
background-image: url(wallpaper.jpg);
background-size: 100% auto;
}
For a live demonstration first pick a wallpaper at my site...
http://www.jabcreations.com/forums/?prompt=themes-wallpaper
...and then change the "wallpaper Effect" here...
http://www.jabcreations.com/forums/?prompt=options-basic
You'll find the relevant CSS code at themes/style_user.css once it's applied.
When resizing the browser window the browser just reduces the space after the element. I want to decrease the space equally on the left and right as it is done in Facebook.
Here is my code
CSS:
body{
margin-left:10%;
margin-right:10%;
}
HTML:
<body>
Some content
.
.
.
.
</body>
First I thought of giving a min-width to body. But computers having less screen size will be a problem. Also min-width will not be good solution.
Just give width 80% to your body and give margin-left and margin-right to auto for center aligning
body{
margin:0 auto;
width:80%;
}
suggestion:
To give styles to body is not a good practice, give styles to top parent div in your page
like this,
<body>
<div class="container">
all page elements.....
</div>
</body>
CSS:
container{
margin:0 auto;
width:80%;
}
Have you considered media queries?
https://developer.mozilla.org/en-US/docs/CSS/Media_queries
here's a demo:
http://playground.johanbrook.com/css/mediaquerydebug.html
and another good article: http://css-tricks.com/css-media-queries/
What's the problem with
width: 50em;
max-width: 95%;
margin: 0 auto;
as it is suggested so many times on the web to display a centered wrapper, that shrinks and expands with the browser window and equal spaces left and right…
I have coded a site with a simple horizontal "nowrap" css with img floated side by side. I have also hide the scrollbar away. The side scroll can be done by normal vertical mousewheel scrolling (see my project url
Because the images is all in big resolution of 1400x850px, i wanted to create a site that that will scale the images according to the browser size. Currently all the images are in max-width:100%, my aim is to scale them below that percentage when the browser is smaller.
I tried using max-width:100% with both width and height in auto. It not working.
I try using jquery fluid images script, they are not working as well due to "nowrap"
Below are the main code i am using:
#content {
width:5600px;
overflow-x: auto;
white-space: nowrap;
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
#portfolio img {
float:left;
display:inline;
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
This is the link of my project: http://credencepartners.com/demo02/
This is the result i trying to produce (for example please see the comments): http://credencepartners.com/demo02/interface/scene01.jpg
Do i need to implement javascript on this or CSS is possible for this scenario?
UPDATES / 10th Aug 2012
Thanks to Corey for the heads up, i have updated my demo02 link. The problem now is just adding the texts below the images. I tried using a div class to combine the text and images together, the result causes the images to be be non-fluid again. Now i need help making a fluid and re-sizable div tag.
GOALS
Knowing that building a typical horizontal side scrolling website is quite straight forward. The main problem i have is only the fluid resizable images at the top. I am pretty new that fluid/responsive layout and hope the gurus here can enlighten me :)
Use this CSS:
body, html {
width:100%;
min-height:100%;
height:auto !important;
}
#content {
width:100%;
height:100%;
position:relative;
}
#portfolio {
width:100%;
height:100%;
position:relative;
}
#portfolio ul{
width:100%;
height:100%;
display:block;
white-space:nowrap;
overflow:auto;
list-style:none;
padding:0;
margin:0;
text-align:center; /*in case not enough images to create a scroll*/
}
#portfolio img{
width:auto;
height:100%;
display:inline-block;
position:relative;
}
And lay out your html like this:
<div id="content">
<div id="portfolio">
<ul>
<img src="src.jpg" />
<img src="src.jpg" />
<img src="src.jpg" />
</ul>
</div>
</div>
I tried a little and found out:
You need to remove the height and width-Tag from the images
You set the height of the "portfolio"-div to the window-height using jQuery/JavaScript
That must be all, hope I understood what you meant