Do we have any specific height for the initial display of the page in different devices.
I want to show a header image on load of a page, on scrolling down more content appears. For fitting the image in view area for different devices with media queries, I use width as 100% but for height I have problem in understanding?
If your width is set to 100% then your height should be set to auto. The image will be responsive and adjust to different screen resolutions without deforming.
Thankyou both!!
I used CSS3 background image properties, instead of fighting for height. Issue resolved. :)
Related
So I've spotted a few sites lately where the background above the fold always perfectly crops to the viewport. For example - if you look at http://startbootstrap.com/templates/grayscale/ or http://simplesimple.co/currency/ on a mobile, tablet or desktop device the background image always fills the viewport even at different orientations.
It's not as simple as adding a max-width: 100% to the image as this would only fill horizontally. My first thoughts are that it is the art-direction use case, where breakpoints target different crops of the image. It seems like a lot of work to achieve this effect though so I wonder if I'm missing something.
With reference to http://startbootstrap.com/templates/grayscale/, the main banner image has been added as a background image and its background-size property has a value of cover which will stretch the image to fit the screen at any size.
Then there's tricks like setting the main section tag to have a display property set to table which allows its child div (containing title and sub title) to be vertically centered with display: table-cell and vertical-align: middle
Its built on twitter bootstraps framework which has grids and media queries built right in allowing for different images to be added via the background-image property for each screen size
I have an image of that has a height of 480px. On my Macbook it looks OK but when I go to my 30 inch monitor obviously there is a huge space in the bottom.
What can I do to make sure that the 480px will always be in relation so the size of the user's screen?
I did some searches and it seems that using background-image: cover or background position I can do some stuff but highly likely it's not what I am looking for. What can I do tackle this issue?
One way to achieve this is to place the image in a container that can scale with the page.
Height is a hard attribute to scale, but you can achieve it as long as all of the parent elements have a specified height as well.
You can use CSS code such as
height:40%;
to scale elements.
Scale the page's height here to see for yourself: http://jsfiddle.net/L7uWd/
Try with the width in percentage to set the image size as per the browser width. It's always preferable to set the width in percentage(instead of pixel) while re-sizing the element based on window re-sizing.
Set the image height to some percentage instead of pixel, that will automatically handle with the size of the screen.
Basically, on one of the pages of my website, I have a div with 60% width, in which all of my content is stored.
My problem is, when I try the site on different, lower resolution monitors, Some of the content in the div ends up being cut out.
I don't want to increase the width, but I have no ideas on how to fix the issue without doing so.
You can use media queries to change the style rules based on factors like device-width and resolution:
https://developer.mozilla.org/en-US/docs/CSS/Media_queries
For example, you could adjust the font-size in the div based on the size of the viewport
I'm making a responsive blog for both mobile and desktop users (all in one). With respect to image resizing, I understand that I can use width:100%; height:100%; so that they scale proportionally depending on the page size, but I've noticed that smaller images upscale to fit the width of the DIV that it is in. Let's say my DIV has a max-width of 640px but an image I include within it in 500px.
What CSS can I use to keep the image at 500px and then scale down proportionally if the resolution width falls below 500px?
The reason I'm asking this is because not all images in posts may be 640px wide.
Set your image max-width property to the actual image size.
Why don't you just set max-width:100% and leave width off.
Got sample set up here: http://codepen.io/rctneil/pen/myxDc and full page sample at: http://codepen.io/rctneil/full/myxDc
On that sample, I have a header with a .container within it, header is full width and .container is fixed to a particular width.
If you set the width to be 980 pixels or less then the page renders nicely on an iPad, if you set that width to be greater than 980 pixels then you start getting erroneous space on the right hand side.
I thought the default layout mode on iPad was that if an element is wider than the visual viewport, the visual viewport would zoom out until everything fitted and then allow the user to manually zoom into parts of the page. This is how it has worked in the past for me, I am sure.
Anyone know why the site is not auto zooming out to fit correctly?
If you set the height of the page large enough to require vertical scrolling, it will automatically shrink down the width. For example, set the width and height to 2000px on .container, and it shrinks the page appropriately. This probably isn't a viable solution in this circumstance, but it is a interesting observation of iPad viewport behavior.
I would recommend using iOS meta viewport tags. http://developer.apple.com/library/safari/#documentation/appleapplications/reference/SafariHTMLRef/Articles/MetaTags.html