I've set an image to max-height:100%; of the browser window (with a small padding at the bottom), centred on the page. Currently, I'm having problems keeping the aspect ratio of the image from squashing when the browser is resized (interestingly it shows at the correct aspect ratio when refreshed after a resize).
I've set up an example in codepen. Would appreciate any advice on how to keep the ratio correct.
http://cdpn.io/sHJhl
UPDATE 18/08: I've updated the code in the copepen above. It's now working in all browsers except Chrome, which distorts the image when the browser is resized. Oddly it resizes fine in Chrome when the codepen is in edit mode. I've tested the code from the codepen in my development site and it shows the same issue, so it's definitely not a codepen quirk. Hoping someone can help on this one.
FURTHER UPDATE 18/08: Solved this issue with Chrome by adding max-width:100%, see answer below.
Solved this issue. The image needed max-width:100%; as well as max-height:100%; width:auto; to work in Chrome. I've updated the codepen to show the full working code: http://cdpn.io/sHJhl
Image's parent element .photo-bkg doesn't have any width set, so add it a width: 100%;
.photo-bkg { height:100%; width: 100%; }
That should do the trick.
You want to achieve a full page background right?
This worked for me:
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
source: http://css-tricks.com/perfect-full-page-background-image/
Related
I created a landing page for the website www.foscaintepidario.it
But I want the image on it to be centered, and remain centered, also when the browser-view is changed. Changed in the perspective of size, but also the switch from landscape to portrait and the other way around.
In het HTML/CSS I currently make a distinction between the portrait and landscape version, they both have their own image.
Hope you can help me.
you can use css background elements to have a clean view.
background-image: url(url to image);
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
I finally solved it. The solution with the background-image works fine. The only thing I had to add was the height: 100vh parameter!
Thnx for your support
I am puzzled by what I am doing. First take a look at my tiny snippet:
HTML:
<div class="image_container"></div>
CSS:
.image_container {
background-image: url("images/wall.jpg");
height: 120px;
width: 100%;
}
What I am using above was to have a container with an image as a background that will take the entire width of the user's screen since I am using width: 100%. But on my 13 inch Mac it looks that way but when I go to a much larger screen the image shows partially but doesn't take 100% of the screen. Why is it that despite using width 100% it still won't take the entire width?
I tried to see if I can use background-repeat: repeat-x but that simply repeats the image and it looks terrible. What else can I do or is there another approach?
Because you set the width for the div, not the image. Try background-size: cover;
Oh...and container should actually be class.
I have a <div> with a background Image.
The <div> size may change over the time.
Is it possible setting the Divs Background image to fit the <div> size?
Lets say I have a div which is 400x400 and an Image which is 1000x1000, is it possible to shrink the image to 400x400 and therefore fit the <div> size?
If you'd like to use CSS3, you can do it pretty simply using background-size, like so:
background-size: 100%;
It is supported by all major browsers (including IE9+). If you'd like to get it working in IE8 and before, check out the answers to this question.
Use background-size for that purpose:
background-size: 100% 100%;
More on:
http://www.w3schools.com/cssref/css3_pr_background-size.asp
Use background-size property to achieve that. You should choose between cover, contain and 100% - depending on what exactly you'd like to get.
You can achieve this with the background-size property, which is now supported by most browsers.
To scale the background image to fit inside the div:
background-size: contain;
To scale the background image to cover the whole div:
background-size: cover;
Use this as it can also act as responsive. :
background-size: cover;
You could use the CSS3 background-size property for this.
.header .logo {
background-size: 100%;
}
Set your css to this
img {
max-width:100%,
max-height100%
}
Wanted to add a solution for IE8 and below (as low as IE5.5 I think), which cannot use background-size
div{
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=
'/path/to/img.jpg', sizingMethod='scale');
}
This should work but will not keep the image aspect ratio:
background-size: 100% 100%;
how can i modified this plugin http://srobbin.com/jquery-plugins/backstretch/ to auto-keep the background ratio when windows is resize like http://css-tricks.com/examples/FullPageBackgroundImage/css-1.php.
i like the smooth fade effect in "backstrech" i would like to keep
this plugin but if anyone have a better plugin that does what i'm
looking for with the smooth effect between images.
Thanks
try to add this to your Css file
html {
background: url(../img/pattern.png) fixed, url(../img/background-image.jpg) 50% 50% fixed no-repeat;
-moz-background-size: auto, cover; /* Firefox 3.6 */
background-size: auto, cover; /* Chrome, Firefox 4.0+, Safari 4.1+, Opera 10+ and IE9 */
}
I'm using the FB like box widget on my website. I noticed that bigger images published on FB are appearing distorted in the box.
I'm seeing that the css responsible for this is:
.uiScaledImageContainer img {
height: 100%;
min-height: 100%;
}
Is there a way I can force height: auto in my css?
Apparently anything I declare for this element in my sytlesheet is ignored, even using !important.
You can't edit the CSS in Facebook's iFrame.
I'm having the same issue but there is another bit of code that is overiding the "height:100%" with "height: auto" and i'm getting the same outcome. If I change the min-height to "auto" it seems to fix it.
The original code is:
.fan_box .uiStreamStory .uiStreamAttachments .photoRedesignAspect .img, .fan_box .uiStreamStory .uiStreamAttachments .photoRedesignCover .img, .fan_box .photoRedesign .img, .uiStreamStory .videoRedesign .uiVideoThumb img {
height: auto;
left: 0 !important;
width: 100%;
And
.uiScaledImageContainer img {
height: 100%; <!-- this is being overwritten -->
min-height: 100%;
position: relative;
Now we just need someone to update facebook's likebox.php.
Surprisingly, IE is the only browser that this isn't a problem. And for some reason firefox doesn't load the app altogether...
since nothing has changed until now here are some more details I found out to this problem:
It only appears to me on images that are in an album, not single
images that were uploaded in a post.
It appears to me in chrome browser and on iphone and android devices, not on firefox and
internet explorer.
Maybe that helps.