A client wants to have an image that takes up entire screen, on mouse over the menu would appear. The problem is the height vertical alignment for various screen sizes....What would be the most common sleek looking solution to this issue? Let's assume that the most common screen resolution for the site's audience is 1024x768 but it should look good on smaller resolutions too (specifically for laptops).
My initial idea was to use an image such as 1000x600 and black background...any other ideas?
Thanks!
Compare the aspect ratio of the screen with the aspect ratio of the image, then scale the image appropriately. For example, if the aspect ratio (width / height) of the screen is larger than the aspect ratio of the image, then it's too wide - so scale the width of the image but keep the height the same size as the viewport. Visa versa for if it's smaller. I think you can use PHP to achieve what you want.
Related
How to create a circular shape with StackLayout and it's size dependent on the screen size.
I have tried to set height and width to 100 and border-raduis to 50%,
but it's look bigger in small screens, and I have tried to set height to 15% and width to 25% and border-radius to 50% (according to the smallest screen I am testing on it) but it's give me an oval shape in taller screens.
I know there are screen qualifiers that I can use, but there are a lot of varieties of heights and widths which sounds not a great idea.
Are there any idea about how to achieve that without screen qualifiers in nativescript core?
please note: I am taking the circular shape as an example to understand how to style the whole application.
The W3C documentation states the following:
Pixels (px) are relative to the viewing device. For low-dpi devices, 1px is one device pixel (dot) of the display. For printers and high resolution screens 1px implies multiple device pixels.
This kind of makes sense for standard elements, like divs and tables. If the screen has a greater pixel density, more real pixels are reserved for a CSS pixel, in order to keep the actual element dimension roughly equal on all the screens regardless their density. In this sense, CSS pixels can be seen as a pseudo-absolute length measure.
But what about images? I know it's bad practice to let the browser to resize images. But then how source image's pixels are treated? I suppose it can't be the same as other elements, otherwise I would get a low resolution image on high-density screen, given that more device pixels are assigned to a single image pixel.
If the resolution of an image is lower than the resolution of the screen, the graphic card will add pixels to make the image fill the pixels needed.
So if your image has the same resolution than your screen, each pixels of the image is rendered in each pixels of your screen.
But if your image has a lower resolution than your screen, and if the graphic card would not do the job, your image would appear smaller because it has not enought pixels to fill your actual screen resolution.
As your can see, the graphic card will always force a middle color, which is a medium between your two colors.
Obviously, if you image if a full black pixels, the middle color of black-black is black, so the image will not appear stretched.
I am trying to set the aspect ratio for a front page image that is almost full width. Currently as the screen gets smaller it decreases in width faster than height and looks skewed as a result.
I was thinking to use a media query to set brake points but that would mean some skewing inbetween the break points so I would prefer to use something that locks the height to the width and therefore keeps the aspect ratio. Can someone tell me how to do this in wordpress?
site(http://www.taranoone.ie/)
On my website I have a slider of images across the top. This is the demo of the drupal theme (the company, not my website),
http://demo.drupalizing.com/?theme=bluemasters
All my pictures are different sizes or different kinds of shots. I don't know how to say it. I can re-size in any program. If I keep the aspect ratio, the 960px will be fine, but the bottom will be stretched.
How do I keep it all good and fit it in 960?
If not 960, what is a good number or other type of design?
Can I use CSS? Do I use an image program like Gimp, Paint.net, etc.?
As long as all your pictures are larger than 960px in width you can use HTML or CSS markup to resize the image to 960px. However, please remember that there is no way to display the an entire image say 4000x2000 in a 960px box without making it look small or choppy. In this case I would use an image editing program and cut out the main focus of the image and save it as a 960x300 (or whatever height) image.
From your link, the slider images are all 930px x 320px. You can use CSS to overcome this limitation, but your images might stretch out of proportion.
I would start with a an art work that is 930px x 320px, and just crop your photos according to this aspect ratio.
In this BlueMaster theme, the CSS already has a width set to 100% so no need to worry about scaling.
Online photo editor tool: http://pixlr.com/editor/
File -> New Image
Width -> 930
Height -> 320
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.