I have a single gif image (1px X 1px) which is used as a border for 960 grid framework of my website.
All the layout fits in the correct place in normal state even on increasing the zoom percentage also.
PROBLEM: In case of decreasing the zooming level, border is invisible for certain zoom levels.
e.g. it is visible in 80% but not for 90%.
Is there any cross-browser CSS code OR any other fixes for this issue?
Can we use any specific CSS property to restrict re-sizing background image for browser zoom?
Thanks
Related
I have a mat-sidenav component filled with mat-card components. Outside the sidenav, I have the rest of my page. What I would like is for my sidenav card components to keep the exact same size as someone is zooming in and out the page. I have illustrated what I mean:
The image on the left shows my page before zooming, the right side is after the zoom. The content outside the sidenav (the boxes) zoom and scale accordingly, my sidenav itself has a max width set that it does not exceed even after zooming (I have achieved this). My problem lies in the mat card components (represented as circles). I would like my mat cards to also remain the same size after zoom as seen in the image, however, they grow like my components outside the sidenav. My mat cards are also wrapped individually in an <a> tag. I need it as if zooming in and out does not effect the sidenav nor its contents at all, how can I achieve this?
I would suggest you to work with the CSS Units: vw and vh.
vw=1 is relative to 1% of the width of the viewport, while vw=100 is 100%.
vh=1 is relative to 1% of the height of the viewport, while vh=100 is 100%.
The size will always adjust to the size of what you see. Therefore, even when you zoom in or zoom out, the viewport will stay the same and therefore, the sizes of your components won't change then.
You can test it out on these examples:
https://www.w3schools.com/cssref/tryit.asp?filename=trycss_unit_vw
https://www.w3schools.com/cssref/tryit.asp?filename=trycss_unit_vh
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. :)
Does anyone know if using a CSS sprite for the background image of a draggable element has and adverse effect on performance - especially on touch enabled devices such as tablets or mobile devices?
Each item is around 50px x 50px and the sprite is 800px x 1400px (20kb)
I just wonder if the browser is working hard to re-position the background image when it's being dragged and re-positioned?
When you drag an element that has a background position set, the background position is not adjusted, just the element's left and top values. 800 x 1400 is fairly large for a sprite and even at 20kb, that would be you're only performance issue. Especially on mobile devices.
When setting a background-image for a <div> element is the required image size effected by the border?
I'm working on an retina iPhone project with a element that is 100% width. My background image is 640px wide and I'm using background-size to get it to display nicely on the retina display.
If I use a border on my <div> will i need to reduce the size of my image to get a 'perfect' display?
e.g.
320px(div) - 4px(2px border left and right) = 316px
So my image should be 632px (2x316) to get a 1:2 'perfect' pixel ratio.
Background images display within the constraints of the border — that is to say the border is not included in the space that the background displays over (it will display over padding, though).
It may be helpful to your particular case to use background-size: cover (MDN reference)?
I have a iframe embedded, and when browser zoom in, i don't know what is the base center for zoom. i thought it should be the top right, but it doesn't.
see this website, http://www.deitte.com/IFrameDemo3/IFrameDemo.html
and ctrl scroll, the layout will mess up.
When you zoom in, you're not just zooming in on the iframe, but the entire page. This also affects the top and left offset positions of all the elements on the page, hence why it changes position.
The embed element has it's width and height set to 100% though, which adjusts to zoomed view port, hence why the flash element doesn't adjust it's size.
I think part of the problem here is there is a mixed approach to the UI design; most of it is Flash, with the HTML iframe positioned on top of it, in the perfect position such that it looks like they are seamless (at default zoom). It's difficult to get these two to scale in conjunction with each other in this case; there's nothing to bound the size and position of the iframe that is controlled by the flash element.
I am no flash expert, but I would hazard a guess that the flash application currently is not aware of the browser zoom level and is therefore not scaling correctly either; while it's width and height change according to it's container's size, it's font sizes never increase or decrease (amoung other things).