I stumbled across an interesting behaviour of Pygame under Win 7. The program I wrote has originally been tested under Win XP. When changing to the FULLSCREEN mode, it would "stretch" the images to fit the ratio of the fullscreen. Yet under Win7 it doesn't...
When I change to fullscreen, everything remains at its original size, instead of stretching the images, the borders are filled with my background colour.
Is this intentional or a bug? What behaviour would you expect in this case? I find it quit interesting, yet I'd like to have a way to stretch the images to fit the screen also under Win7, preferably without having to rescale them all (it's quite a number...).
Pygame won't distort the aspect ratio of the image on the screen when switching to fullscreen, so when you set the display mode using
pygame.display.set_mode((width,height),pygame.FULLSCREEN)
black space will be added to fill in areas that are left open when the aspect ratio of your monitor doesn't match the ratio of width to height.
Related
I am making a website for my school, and I used to do that work on windows 7 before i switched to Ubuntu. I know that I used 1920x1080 resolution pictures for background on windows and it was perfect but on ubuntu it does not fit. I tried in a couple of different browsers. At school they are reviewing it on windows, my concern is if I make it lower resolution to fit here on my system will it mess up the website when they review it and vice versa?
You need to add background-size: cover; property to your background image styles. From https://developer.mozilla.org quoting:
The cover value specifies that the background image should be sized so that it is as small as possible while ensuring that both dimensions are greater than or equal to the corresponding size of the container.
It will not perfectly fit for some greater resolutions or resolutions with different ratios, but it will ensure that it covers it completely at the cost of fitting the whole image. The image will not get stretched either.
I am currently working on a template for a webpage and I'm currently working on the responsiveness for it. I have the desktop version and the mobile phone versions working just fine. The problem that I'm having with it right now is I'm trying to make a version for tablets. The "tablet" I'm using right now is a surface pro which has a 96 dpi. My desktop has and older 1080 monitor. So when I open chrome up with dev tools on the surface the pixel width is the same or close to my desktop but is looking completely different. Text that is on a single line on the desktop is on two lines for the surface and not all is showing. The reason this is an issue is that this is the header of the page. At full width on the surface it's acting more like half width on the desktop. I thought it might be because the screen for the surface is higher DPI on the surface but not sure. Is this what is causing this and if so how do you fix it. Setting a media query of say 800px for tablet works for say desktop and some tablets but doesn't seem to be working for something like a surface. So is there a different way to set up width? I have code of the site but I don't think any of it would be helpful. If needed let me know.
Try using vh(viewport height) for height and vw(viewport width) for width, it uses percentage of the window. 100vh would use 100% of the window height and 100vw would use 100% of the window width. It's better than using pixels and requires less work to make the page responsive, pixels are inconsistent and break easily.
my web site displays images bigger than their original size.
The images are 20% bigger than the original created with photoshop (for example), if an image's width is 200px, the browser display is 240px.
So all my images are blured.
Do you know why?
I've found the solution!
Windows 10 has the default setting of dpi seted to 125% (search dpi into serach box and then look at "update text app and other elements"), this increase the dimension of everything in my monitor, so the images into my web site are bigger of 25%.
What I can do to prevent this behaviour on my web site and continue to use the default windows settings dpi?
Here are a part of my code:
First of all in the head tag I have this meta tags:
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.0,user-scalable=1, height = device-height" />
My css hasn't any zoom or similar, and my html is like this:
<img src="/path-to-image-folder-ebook-cover.jpg">
The width of this image is 250px and in photoshop it looks like perfect, but in browser (chrome or firefox is the same) it looks bigger and blured, but, if I zoom down the browser to 80%, the image is perfect
I also had my Chrome browser displaying larger than my picture viewer app. As Daniele said. My display settings in windows were scaled to 125%. When I changed the display scale to 100%, the picture viewer app still showed the same picture size while only changing the scale of buttons and other display elements. So perhaps it's helpful info that the scale of my display does not change the image display size but everything else. The browser on the other hand is entirely changed by the system display scale. I even found that http://whatismyscreenresolution.net/ read my screen size too small according to my system display scale being set larger.
Okay, so here's the issue. I'm designing a website mockup in Photoshop (set at 72dpi).
I export a logo.png file with the width and height of: 295px x 129px.
I visit the logo.png file directly in the browser (Chrome or Firefox), and the image appears 25% larger. I verify this by taking a screenshot and comparing them side by side.
I was wondering what the issue was, and I realized that on Windows 8 control panel (Appearance and Resolution -> Display), "Change the size of all items" is set at "Larger - 150% (default)". I'm on 2 4k monitors.
If I change this value to 125% and log back in to the windows user, everything appears way smaller (uncomfortably smaller), but in the browser, my image now appears at the correct size.
So my question is this..
Is there a way to prevent the browsers from resizing my image content? I would prefer not to hack it by specifying width:75%, for obvious reasons (those with 100% OS item scales would see it even smaller).
The image of the card on my site (bottom right) displays differently in Chrome and Firefox. In Chrome, its ratio is preserved, but the ratio is twisted in Firefox.
How can I apply a constant resize of the image itself, cross-browsers (basically do what now happens for Chrome)
You've got the following in your image tag:
width="100%" height="40%"
Try specifying just one of those (I would suggest the width) to maintain the aspect ratio, otherwise the image will be stretched or squished one way or another to fit those dimensions on the less thoughtful browsers.
Ideally you want to avoid allowing the browser to resize the image. Different browsers achieve varying levels of quality which never compare to what you can achieve with a dedicated digital image editor (Photoshop, Paint.NET, etc). Best to resize it to the desired dimensions before publishing then explicitly set the actual height and width in pixels.