Menu
I love the new http://thesixtyone.com design. I am wondering how do they proportionally stretch the image to fit the whole background? Are they using CSS/Javascript or other tricks?
283
If your image doesn't fit the layout, you can resize it in the HTML. One of the simplest ways to resize an image in the HTML is using the height and width attributes on the img tag. These values specify the height and width of the image element. The values are set in px i.e. CSS pixels.
You can use the CSS background-size: cover; to stretch and scale an image in the background with CSS only. This scales the image as large as possible in such a way that the background area is completely covered by the background image, while preserving its intrinsic aspect ratio.
Answer: Use the CSS max-width Property You can simply use the CSS max-width property to auto-resize a large image so that it can fit into a smaller width <div> container while maintaining its aspect ratio.
How to fit image without stretching and maintain aspect ratio? Answer: If you want to use the image as a CSS background, there is an elegant solution. Simply use cover or contain in the background-size CSS3 property. contain will give you a scaled-down image.
Both CSS and Javascript are used.
It takes the greater of height or width, sets the matching image dimension to that, then calculates the ratio of original dimension to the new dimension, then applies that ratio to the opposing dimension.
For example. Say the original photo was 100x100. If your screen is 200x100; then it stretches the first dimension (200 is larger than 100) to fit. This is a 2:1 ratio, so it does the same streatch to the other dimension. The resulting image is actually 200x200.
Add a touch more code to keep the whole thing centered (so the off-screen portions of the lessor dimension are equal), and voila.
In my example, the image would be moved up 50, so that you see the middle 100 (the screen size) of the picture that has been stretched to 200.
The image is actually a DIV tag with the background image property set.
68
Not sure what library they'e using but in their javascript source I did a search for "resize" and found:
Event.observe(window,"resize",t61.background.sync_size);
Which looks like they're attaching an event handler to window.onresize.
34
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
