Automatically setting height for a covered background image - javascript

On this website, I'm using the CSS3 Cover property of the Background rule to stretch an image behind the header.
Right now, I had to set the header element to have a min-height of 500px for it to work. However, this is not an optimal solution because when I resize the window, I expect the height to be less so the image shrinks proportionally. I'm thinking the solution might be in Javascript?
Here is the code:
<div style="background: url(http://altushealthsystem.com/dev/wp-content/uploads/home-banner.jpg) no-repeat 0 0 transparent;background-size: cover; min-height: 500px;"></div>
Link to the JS Fiddle
Is this possible?

You do not need javascript for that. You could specify the header height using percents. However that will work only if the parent has specified height.
In your example you should add
height: 100%;
for html and body elements (all ancestors of header), and for example:
height: 40%;
for you header element.

Instead of declaring a background for the header, you can add an image element with the following styling:
<header....>
<img src="http://altushealthsystem.com/dev/wp-content/uploads/home-banner.jpg" style="max-width:100%; height:auto;position: absolute;z-index: -999;">
<div class="container">
<div class="row top-row">
...
You should also take advantage of the #media tags to declare a certain width and height when the screen is of certain size.

Related

How to prevent Twitter Bootstrap changing margins as width of page is extended

I was practising with the Bootstrap 3 css. I planed on having a fixed footer and a fixed navigation bar on my webpage. So to do this I used margins of 5% to make the content in the middle of my page to not be covered by the footer or header. To format the text I am using the container class which comes with bootstrap. This can be seen in the picture below.
This looked as it should. However I soon discovered that when the width of the page is expanded it increases the margin size. Like in the picture shown below.
So is there a way to limit how much the margins can extend on the container class in bootstrap. For example something similar too
.addThisClassToTagWithClassContainer {
max-margin-top:5%;
max-margin-bottom:5%;
max-margin-left:5%;
max-margin-right:5%;
}
There is a copy of the files here if you believe this is a coding error that I have made.
This isn't exactly a bootstrap issue - when you set padding and margin as a % value, like in your example, the % is calculated from the width of the containing element. If you want to set a fixed height, you can use px, or if you want it to be a consistent size relative to the height of the viewport instead, you can use vh (5vh is equal to 5/100 -- or 5% -- of the viewport height).
Typically, this would be a case for px simply because on a small screen, 5vh could be very small, and usually a navbar, for instance, would stay a pretty consistent size regardless of how tall the window is.
So something like this is probably your most likely approach:
.page-body {
margin-top: 100px; /* some number equal to the height of navbar */
margin-bottom: 150px; /* some number equal to the height of footer */
}
But if you do actually want to have it be relative to the height of the window, you can do this (You will probably need a higher number than 5, here to make similar to your screenshot.):
.page-body {
margin-top: 5vh;
margin-bottom: 5vh;
}
You should find either approach will prevent your margins from changing when the width of the page changes.
The container class is intentionally not 100% width. It is different fixed widths depending on the width of the viewport.
If you want to work with the full width of the screen, use .container-fluid:
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-6"></div>
<div class="col-lg-6"></div>
</div>
<div class="row">
<div class="col-lg-8"></div>
<div class="col-lg-4"></div>
</div>
<div class="row">
<div class="col-lg-12"></div>
</div>
</div>
</body>

Make picture shows exactly full screen, not exceed the height of screen even on different size screen

I have a very large picture, say 1900px width and 1333px height, that cause you have to scroll down a little bit to see what's next, is there a way to make the picture shows exactly the same height and width as the screen even on different device?
Thanks! You can find the picture I am talking about at http://dive.maxinrui.com
the code is
<section class="box">
<img src="images/background1.jpg" class="img-responsive" alt="">
<div class="carousel-caption">
<h1>Welcome to ABI DIVE</h1>
</div>
</section>
If you are using jQuery, you can get the size of the window or your document using jQuery methods:
$(window).height(); // returns height of browser viewport
$(document).height(); // returns height of HTML document
Give your img tag an id and then set the height of that img element with CSS.
You can use CSS3:
html { background-image: url('your_pic.png');
background-size: cover;
}

A table of images, under a div

There's a nice javascript library for displaying photos on iPhone called "jaipho". I'm trying to adapt its slider implementation to work in a normal browser, and I'm having some problems.
Here's the summary of how its slider works: there's a table of images arranged horizontally. The table is contained in a div which has overflow:hidden, and then some javascript moves the table by setting its marginLeft to some negative number.
More specifically: the table is placed inside the div by setting its innerHTML in javascript. Each table cell is of class "slide", which is set by CSS to be the width of the iPhone. The photos are dynamically placed in the table cells by calls to appendChild, so that they need not all be loaded at once.
It works great on the iPhone in MobileSafari. With the photos arranged horizontally, one can slide out of view to the left while the next one slides in from the right.
Now I try to get it to work on a Mac in a browser window. The problem is getting a constant width for each cell -- I can't use CSS because the width I want is window.innerWidth, not a fixed width like the iPhone. I've tried setting the table cells with "width" tags (or "style" tags) to the width of the window. Looking at what Chrome thinks is going on in its Javascript Console, it's as if the table is ignoring the effort of the cells to set their width, and rather the table is setting their widths to be very narrow in an effort to entirely fit inside the window. (Or into its containing div, even though it's set to "overflow: hidden".)
Anyone have any suggestions how to coerce a table into being very, very wide in pixels, even though only some small part of it will ever be shown at a time?
Thanks,
Dave
I recently built something like this, and here is the structure:
<div id="outer_container" style="width: 500px; height: 100%; position: relative; overflow: hidden">
<div id="slider" style="width: 5000px;">
<div id="slide1" style="float: left; width: 500px;">...</div>
<div id="slide2" style="float: left; width: 500px;">...</div>
<div id="slide3" style="float: left; width: 500px;">...</div>
<!-- add as many as you want, just make sure it fits in the 5000px width above -->
<div style="clear: both;"><div>
</div>
</div>
Then the slider works by adjusting the css left property of the the 'slider' div. So basically the viewing window is 500px as well the width of each 'slide'. I guess the key is the float: left on each slide.
To see this div structure in action, check out the top section in the right column that I coded on this site
In order to get the cells to take the proper width, you have to adjust the table width to accommodate all those cells. Take a look at this fiddle: http://jsfiddle.net/USRww/1/. I'm resizing the table to accommodate all cells, assuming that each cell will be 100% of the browser window's width. I'm using percentages there, so everything is fluid.
That markup is using a table as you suggested, but I'd advise just using a container div there with a bunch of floated divs for each cell.

Javascript Detect Screen Resolution, change css, crop images accordingly

So I know how to change the css depending on the resolution via javascript.
How would one go about 'cropping' an image depending on the screen resolution?
Well you can get the screen details from window.screen - though personally I would recommend just finding out how big the current window is, the only reason not to is if you are going to resize the window and that is very frowned upon.
Once you know the sizes and how big you need to make your images, I find that images are cropped easiest by placing them inside a containing DIV with overflow: hidden; set. You can then size the containing DIV to the size required and set the top and left CSS attributes od the image to the negative values of the coordinate you want for the top-left visible corner.
<div class="crop-container" style="width: 200px; height: 200px; overflow: hidden;">
<img src="something-400x400.jpg" style="top: -100px; left: -100px;" width="400" height="400" alt="Something" />
</div>

JavaScript/HTML: How do I display an IMG with a set dimension and if the image is wider or taller than that dimension, to crop/hide the overflow?

I have a bunch of images that are guaranteed to have:
minimum width = 200px
maximum width = 250px
minimum height = 150px
maximum height = 175px
What I want to do is display a consist 200px by 150px rectangle of the image while maintaining scale (no stretching or shrinking).
Which means, I might have some overflow.
How can I display the image so that it keeps porpotions to the original image size, yet displayed inside a 200x150 px window and hiding any overflow?
Wrap them in a container with the dimensions you want and overflow: hidden.
This trick is quite cool and doesnt matter the image size ok look... you can do something like this
<div style="width:Npx; height:Npx; overflow:hidden">
<img src="source.png" style="width:Npx;">
</div>
so how this work, the div will hold the imagen in a rectangle Xpx by Ypx you defined and will "crop" everything that its outside. Then you use the resize who have every browser you can assign a With a imagen and the browser will resize it for you. So if you put the same width that the div holder you will give the impresion that the image fit in that rectangle. This is the best option I can find without use server side code.
the next example is:
you can define again a rectangle and then assign a background, the big problem is the the imagen WILL not resize to fit the area.
<div style="width:Npx; height:Npx; background:url(yourimage.png) center"></div>
hope to help you... best
I made a quick demo (online here) of a way of solving it similar to nahum's second example. There are 3 images within the range of sizes you set. It doesn't resize or stretch the images and they will follow the alignment of the surrounding text.
Hope it helps,
Jedidiah
<span class="thumbnail" style="background-image:url(200_150.jpg);"></span>
<span class="thumbnail" style="background-image:url(220_160.jpg);"></span>
<span class="thumbnail" style="background-image:url(250_175.jpg);"></span>
span.thumbnail{
display:block; display:inline-block;
width:200px; height:150px;
background-position: center center;
background-repeat: no-repeat;
}
Use a span rather than a div because IE6+7 will only let you set display:inline-block on an element that is naturally inline.
The first display:block is a fallback for Firefox 2 which doesn't support inline-block.
If you're images are particularly large, or there are going to be lots of them (for example, a thumbnail browser). You may want to consider creating a pre-cropped copy of them image. This can be done using gd or imagemagick [0] - you can also find a number of wrapper libraries around these extensions that may make the task easier.
[0] http://php.net/manual/en/refs.utilspec.image.php
In theory, this is exactly what the clip property of CSS is for - but there's one, sometimes really painful, side effect to using it, though - the image needs to be absolutely positioned:
<html>
<head>
<style type="text/css">
.thumbnail {
width:200px;
height:150px;
}
.thumbnail img {
position:absolute;
clip:rect(0, 200px, 150px, 0);
}
</style>
</head>
<body>
<div class="thumbnail"><img src="http://uhaweb.hartford.edu/SDUNN/sandwich.jpg"></div>
<div class="thumbnail"><img src="http://uhaweb.hartford.edu/SDUNN/sandwich.jpg"></div>
<div class="thumbnail"><img src="http://uhaweb.hartford.edu/SDUNN/sandwich.jpg"></div>
<div class="thumbnail"><img src="http://uhaweb.hartford.edu/SDUNN/sandwich.jpg"></div>
</body>
</html>
The fact that this takes the images out of document flow is pretty nasty - the best you can do is put them inside a frame of the right dimensions (which means you may as well just use the overflow mask methods other people have suggested). Clip is a useful property in the right places, and a lot of people don't seem to know about it.
Just set a min-height:whatever and max-height:whatever and overflow:hidden on the blocks, then just place the images in the block, and that's it.

Categories

Resources