I've found a TON of posts and questions on mobile width/height. The top two answers are to use media queries, or to use vh/calc(). The other issue I've seen numerously is the mis-understanding of width/height(100%) vs width/height(auto) with the use of margins/padding/borders. What I've run into seems to be unique, but with the flood of mobile issues, I have a feeling somewhere out there is an answer to this already. If you've seen this, please point us to the correct question/answer.
I've created a black glass along with an element to use as an image previewer. The glass and image have width("100%") and height("100%") without any padding, margin, or border. On a computer, it looks perfect. On a mobile device, the dimensions can get thrown off and the background shows through.
If I remove the height("100%") on images that are taller than wide, it resizes to the entire element. If an image is wider than tall, removing the width("100%") causes it to grow appropriately again too. However, this doesn't solve my issue because without a width or height cap at 100%, larger images will overflow.
I first noticed this issue on my cellphone (android) and have had no issue repeating it on Chrome's emulator. I have uploaded a quick recording of what I am seeing to screencast.
It's been suggested that a css rule is leaking from a parent element. Chrome supports the style 'all: initial;' to reset the css. I also manually reset my css with this method. Resetting the styles did not change the issue.
Once again, thank you for taking the time to look at my issue!
Related
I'm trying to update/add functionality for someone's library that displays a SVG. A demo of the library can be found here: https://rschristian.github.io/preact-github-calendar. Source here: https://github.com/rschristian/preact-github-calendar/blob/b51d41ac92d3b195e14a175248e4c408404830f4/src/index.tsx#L200 . It is (P)react, but the main thing is the SVG I've linked to (I believe).
So this library is a recreation of GitHub's contribution calendar, plus a few things here and there. Currently, the behavior is that the whole calendar is fit into the parent element no matter the screen size. So on bigger parents it scales up on smaller it scales down. The issue I'm trying to fix is that on smaller screens like a phone, fitting the full calendar into the width allowed really compresses the component and makes it rather unreadable.
So how does GitHub do this? It basically hides the left-most x%, so only the most recent (right side) data is shown.
But here's ultimately the problem I can't solve: I want the calendar to be remain dynamic (and I imagine the library's owner will too) but on smaller screens it should be cut off. I believe this means that I want to use the viewbox on desktop+ screens, but resort to height and width on smaller devices in order to actually cut it off. I'm not sure if this is the right idea though, and if it is, how to go about doing that at all.
Now I've tried a bunch of way of doing this, and I believe preserveAspectRatio="xMaxYMid slice" is what I want (https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio) but I can't seem to get it working. I'm not really understanding how height/width, viewbox, and preserveAspectRatio all line up. It seems like preserveAspectRatio is entirely ignored and I'm not sure why.
Sandbox: https://codesandbox.io/s/elegant-dubinsky-8miml
I have little website I'm trying to plan on building. But when I started making the background image for it, the image is made so my website is kind of scrolling web page up and down so I made it long. But now the image only shows small part of it, I trying changing resolution of my browser and I could see it but without that I cannot scroll to see the whole image.
The problem which shows that the photo is not fully shown, photo is 2160*3840 px means it is opposite of normal resolution:
If you're using CSS and adding this as a background image to the page body, then it should be an easy problem to solve (and in fact you get quite a few options).
Firstly, lets assume this is your current code:
body {
background-image:url("yourimage.png"); /* The filetype does not matter */
}
Now, as far as CSS sees it, some people viewing your site could be on phones, some on 13" laptops, or some could be viewing it on 5k desktops - if we want the image to work on all at all of these different sizes, then clearly the image is going to have to be modified in some way.
By adding the background-size property here, we can adjust how this happens:
background-size:cover; seems like the best choice for you. It will slightly crop / stretch the image to fit it (but remember, this is probably going to be beneficial).
background-size:100% 100%; will always display 100% of the image - but this will usually result in it being stretched, etc.
There are quite a few other values this property can be set to - you can take a look at them here, or read the spec on it over at MDN.
I have begun developing a webpage, just playing around, and I noticed an issue. I code with my live site on one half of my screen, with my editor on the other. It was all going fine until I extended my web browser fully and noticed that only part of my site was re sizing how I wanted it too. Sadly my site is not live, however I do have a link to the code: http://pastebin.com/yeWzfsBW
In theory, the image (logo) doesn't scale down when I resize the window, it stays the same size no matter what. I attempted to use percentages instead of pixel width/heights however it seemed to have no effect. I will try to pop this live so you can see what I mean exactly.
Fullsized browser: http://imageshack.us/photo/my-images/585/fullsizen.jpg/
windowed mode: imageshack.us/photo/my-images/42/resizedkl.jpg/ (please put in the http:// I couldn't link more then two links in this post)
Hopefully you can see what I mean, i'd like the logo to scale, like the #info css section.
Thanks!
no need to wrap the image in a div.
set width & height in css.
set max width and max height.
there is a challenge with keeping the aspect ratio on the image.
to get started, below is an example using your code. after looking at this you may provide feedback about exactly you are trying to achieve.
http://codepen.io/seraphzz/pen/thGkI
I am in the final stages of developing a website for a client and am having much difficulty figuring out how to prevent a small flower image from inheriting the transparency of it's parent element.
I first tried making the image independent, using absolute positioning in the css. This worked; however, it introduced an alignment issue depending on the size of the browser window and size the the monitor and also the operating system. I was able to eliminate (somewhat) the browser issue by adding in browser selection javascript and adding the requisite css code to check for each browser, but I was still running into the alignment issue depending on the size of the browser window and size of the monitor screen.
To view the page with the independent floating (flower image), please see the following url:
mauisunsetb122.com/index5.html
I then decided to tie the image to the adjoining text so that no matter the size of the browser window or monitor, the image will always be anchored to the text. this is where the transparency issue occurred. To see an example of this please see the following url:
mauisunsetb122.com/index5_8.html
I tried resolving the issue by following the example found at the following url, but it didn't work:
http://blog.ninanet.com/2010/04/27/css-transparency-inheritance-hack
Thanks in advance for your assistance!
If you wish to make the background transparent and not have the child elements inherit this then you have several options:
Use a small PNG with transarency as the background image.
Set the background color using rgba 'background-color: rgba(255,255,255,0.5);'
Use horrible css hacks
Generaly 1 seems to be the most used and supported.
My content wrapper will be centered in the body. the problem i have is that i have a certain div that will be partially reaching into the body and out of the wrapper using z-index. this works fine when using a certain solution. if an user is maximizing its desktop solution the frame of the content wrapper wont be visible anymore. even then the certain div is no more visible. so is there a way to limit the max. zoom?
here is an example: link
when you will zoom in you can see that the red div is from a certain point no more visible. this i would like to avoid if possible. thanks a lot.
Various browsers allow you to define viewport metatags that define the allowable zoom limits (for example Web Kit-based browsers). If you know what your target browsers are, you may want to investigate this.