I have an issue with css. I have to fit an image of variable size to a div with 100% width and 96vh. Also it should look good on resizing of the browser. I tried some tricks, but the result isn't good at all. Here is an example: http://dev.tourday.co/tour/Test-Emir-tour/45. The image looks really zoomed in on a 1366x768 resolution.
In this case I would like to get the result like when its completely zoomed out (something like this http://pokit.org/get/img/4445922ec2a29994b530d45759003d67.jpg).
I'm okay with the sides being cut out a bit because the aspect ratio of the picture is different than the div's, but I'd really like to avoid stretching.
Tried messing around with width:100%, and height:100%, but then stretching accours. What am I missing here?
if you define the image as a background image for its container, you can use background-size: cover . This will cut off some parts (depending on the window proportions), but fill the whole container and not distort the image proportions. Adding background-position: centermakes sure the middle part is always shown.
Related
I am having little trouble making the background image responsive. It works fine in the desktop.
body {
background:url(../Images/mountain.jpg) no-repeat;
background-size:cover;
}
This is fine when I don't care for responsiveness, perfectly fit to the window. But,
as I make window smaller the width is maintained perfect but the height of image is shrinking and I get awkward white background.
Then to solve that I added this,
height:100vh;
This was nice, my image height was perfectly aligned to window as I made smaller. Though image is also perfectly aligned for desktop and mobile, I am losing the image as I make window smaller. It is being cropped.
What should I do? Is media queries the only solution? What can I do except media queries with different images?
You can use the background-size property. Its accepted values are:
contain : Scales the image as large as possible within its container without cropping or stretching the image
cover : Scales the image as large as possible to fill the container, stretching the image if necessary
Of course it cannot stretch outside of the container (for example if the body element does not take the entire page, you might wanna add min-height: 100vh; for that)
I want to do something like this: PhotoView fit screen height maintain aspect ratio in CSS as shown in the first two pictures. The method i'm currently using, cover, gets silly while on mobile so that the background image covers only the above part, like this.
How can i resize the image so that it keeps this aspect ratio, but covers the whole screen, even if it means cutting some of the picture out?
object-fit: cover is the right thing to use for this. Your issue seems to lie within the container's height. Try setting a min-height: 100vh; for it?
Or, if that's not the case, please provide a working test-case of your code, so we can see what's actually going on.
What is the best approach to dealing with images whos height is much MUCH larger than their width in regards to covering the background?
The image I have is 1026x2258 (width x height) and displays HORRIBLY.
Are there any tricks to deal with this scenario? There isnt much more cropping that can be done with the image.
It should ideally fit in a div container with a height of around 1700-1800px, however with that width it has to manipulate so much that you hardly see the image.
I tend to use background-size: cover and background-position: center
That way you can see the middle of the image
I advise you to use various image sizes, it may take more work to arrange, but will load faster and can be adapted by css.
Try something like:
#media(max-width:2250px){
.image{background-image: url('../images/2258x1026.jpg')}
}
#media(max-width:1920px){
.image{background-image: url('../images/1920x1080.jpg')}
}
/*#media(max-width:1920px){ <- width of screen
.image{background-image: url('../images/1920x1080.jpg')} <- image for this screen
}*/
I have to display a bunch of images in a page. Images are of different size, some very wide and some very thin. I want to put them all in a container of fixed width and fixed height.
The logic of placing the images should be like this:
Say if image is smaller than the container, scale it up to the maximum size such that the aspect ratio is maintained, and put it at the center of container.
If image is bigger, scale it down while maintaining the aspect ratio.
Some examples:
Say our container is 150x150, and we have an image sized 100x50. In this case the image should be scaled up to 150x75.
If we have an image sized 100x300, the image should be scaled down to 50x150.
While this can be easily done with javascript, I'd like to avoid that if possible.
I'm wondering if there's any way to accomplish this with CSS alone. I can live with a CSS3 only solution, or even with webkit/firefox specific directives, as long as it works on latest versions of Chrome, Firefox and Safari (I will use a fallback for IE if there's no choice).
Edit: I know about max-height and max-width of course. The issue is that if I set both max-height and max-width to 150, images won't be scaled up if needed.
Don't use an <img>. Instead, use a background-image style:
background: transparent url('path/to/image.png') no-repeat scroll center center;
background-size: contain;
The background-size does the magic, scaling the image up or down so that it snugly fits inside the container.
Check out this fiddle http://jsfiddle.net/demchak_alex/FazvX/3/
Though this only works if you can apply classes to individual images
EDIT:
if you can use background images, check out this fiddle http://jsfiddle.net/demchak_alex/FazvX/4/
The "image only with added classes" works on the top, and the using background images works on the bottom.
I've never dealt with a website like this before, but here's what I'm trying to accomplish...
I have one large image (1000px x 1000px) which I want to use for the background image. The content itself only takes up around 500px x 500px, and It needs to be on the same position all the time relative to the background image.
This is complicated to describe, so I'll make a picture:
This itself doesn't seem like it would be that hard, but what if the browser is larger than my 11" screen? If the browser is too big for the background image, I'd like a simple color to show.
The other problem I see is keeping it centered at all time with scroll bars not appearing as they should only appear if the browser window is smaller than the content box.
I'll be happy to clarify more, as I'm having trouble putting into words what I'm trying to accomplish.
use CSS:
HTML{ width:100%; height:100%;
background:#F00 url(path/to/your/image.jpg) center center no-repeat;
background-attachment: fixed;
background-size:100% auto;
}
background sums up background-color, background-image, background-position and background-repeat (in that order). The other two currently cannot be included in background (though the W3C spec says otherwise).
background-attachment:fixed is like position:fixed for layers and will assure that the image stays visible regardless of how the user scrolls. if you don't want that, wrap a container around your content and assign the above declaration to it instead of to the HTML-node
background-size scales the image into your background
play with the value a bit - what I proposed here will scale the image to fit to the width of the viewport. 100% 100% will stretch it to always cover the entire viewport and auto 100% will scale it to fit into the height of the viewport. In both cases that use auto some clipping might occur - or the background-color (I chose red) will show on the sides/top&bottom
giving the HTML-node width:100%;height:100% makes sure you don't have a white border on the bottom if your content does not fill the screen
Not clear what problems you are having. Here is an example of what you might want to do: http://jsfiddle.net/mhgdZ/