Before anything, I won't provide any of my code because I don't want to use it anymore, i'd rather start fresh with some new ideas
I have to make a div that has a navbar and a background-image in CSS, resize with every resolution, I tried using VW and VH, but whenever I tried resolutions like 1280x1024 and 1024x768, the image would keep it's ratio but would only fill the page width wise, as if there was some margin or padding on top and bottom...showing that the vw and vh were not working.
So my question is, what is the best way to resize a so that the background will always fill the page, even if some of the image is cutout.
Here's an example of a website I found that works exactly the way I had in mind.
http://bigdropinc.com/
Thank you in advance
In CSS use
background-size:cover;
Related
I'm working on a website. There's one problem. The slider won't fit in the frame without stretching.
Slider Image is full width of screen and i have defined height for it.
In CSS part i have applied object-fit: cover but this crop my image
I hope you guys can help me out on this. I'd tried alot and also asked some other people but they can't help me with this.
Or Should i restrict my client to use image of that resolution only?
Yes Mostly you should restrict the client from using different ratios, or resolutions, because you are using the full width aaaaand defined height, defined height is very limiting in your case, what you can do is use
object-fit:cover;
object-fit:center;
but that doesn't stop the cropping it will just focus on the center of the image when cropping.
I'm using HTML5's <picture> tags to create a responsive header that will stretch the entire width of the browser. The header uses an image as the background.
For larger screens I limited the height to a defined value. However, I noticed that a certain breakpoint the image starts to stretch and distort the image.
I'm familiar with using CSS's background-image: url(); to create a mask in order to prevent the distortion, but I don't know what best practices are with <picture>.
My code currently stretches and distorts the image. Is there a way to 'mask' the image?
First thing you should know is that if you will give height to any image then in some screens it will stretch.
So instead of giving the height you should take the image of exact size it will do the thing.
If you can share the code I can fix it and send it to you.
Hope it helps.
User zgood was able to lead me in the right direction. Adding object-fit: cover to the <picture>'s <img> tag got the job done.
so i have this simple problem with Bootstrap but i have not found a solution to it and it goes like this: i want to have a carousel in my web page and i took the code from Bootstrap's official web page and i want to display 1200 x 400 images but if an image i want to display is not that size, it could be smaller or it could be bigger, what should i do to make that image fit on the space if it's not the size i want... i have tried with html specifying a width and a height but it doesn't work. Maybe this question is a little bit silly but i have not found a way and also i have tried to change the size of the image but it was unsuccesfull.
Thanks for the answers!
It is often recommended for slider to keep all your images same dimension. But if there is no way left to do so, you can make CSS adjustments.
For an example:
You can give same dimensions (height and width) in CSS for all those images. and use object-fit: cover; so that image does not squeeze.
I admit in the beginning that I am new to UI development and started learning recently. I am developing a website which i similar to InuitLabs.com. When I looked at the source code using view source I am totally lost. Particularly I am interested in knowing
How the slider image on the homepage is responsive? Is it through javascript or using pure css.
Also I want to know the text moves upwards on scrolling leaving behind the background image intact? How to achieve the same effect.
I know this might be the basic question but I found it hard to know through the source code as there are many javascript and css files.
Regards,
Pradeep
Take a look at the background-size property.
you can set background-size to any px or % value or use constants:
cover will adjust the image size to fill the entire container while contain try to fit the image inside the container without cropping it, most likely leaving some parts of the container without any background.
What you probably want is to set your background-size property to cover.
you just set the image to the percent you want in % through css for example:
.slider img {
width:100%;
}
edit: also you need to specify the height as auto, if you do not want to lose the image ratio. if you set width and height at 100% the image ratio will be messed up.
if you want to set responsive height also for longer device then use width:100%; and height:100%; other wise you can use height:auto; make div and keep it background-size property for it.
I had to redo a website from flash to html/jquery.
Everything looked great. Until I tested the site on a netbook where the screen resolution is much smaller. All the elements were misaligned or didn't stretch as I wanted it to. Or there were scroll bars everywhere.
So, How would do I make it stretch or resize properly,
Is there a property which I can set somewhere that would resize everything proportionately?
You should use heigh / width in percentage(%) rather px / em. change the css file.
Is there a property which I can set somewhere that would resize everything proportionately?
No, I wish :P You'll need to redo the layout to make it liquid or use media queries to make it responsive to different resolutions. I'm afraid both solutions could be pretty complex.
Is there a property which I can set somewhere that would resize everything proportionately?
Everything? No. Font sizes won't adjust based on window size (at least not without JS).
You can set the widths of most things using percentage units in your stylesheets, but even then there will be a point where things will break down.
The current buzzword is responsive web design (I can't comment on the quality of the links from that page) in which media queries are used to provide different designs for different sized browsers.
The property called Media Query we mostly use this property with Responsible Web Design. In which we tell browsers change the specific css property at that particular screen size.
Check this article for more http://css-tricks.com/6206-resolution-specific-stylesheets/
& for Responsible Web Design mostly use value in Percentage instead of Pixels .
Check THIS website for more reference.
unfortunately there is no "magic" which scales things up/down. i can think of some guidelines:
Use relative widths for things (percentages) instead of absolute value
no hardwired sizes, keep them in separate CSS documents
work your way up: choose a minimum resolution, work upwards from it. it makes sizing things much easier.
The question was to RESIZE not to REALIGN. Using percentiles will only change WHERE the HTML elements show up on the page. It will not change their SIZE.
you can use with and height in percentage to set your screen for all resoulation..Give the 100% width to the body and the div you want give 100% width.