So I have images that I would like to take up the full screen in my HTML5 code. I have their height and width set to 100% which I assumed should have done resizing.
If I place images in that are 3240x480 they fit my phone just fine, but on the iPad the stretch the height it seems to fit but the width seems to stay at 320.
If I place in images that are 768x1004 they fit the iPad perfectly, but on the phone they display to large. I thought the 100% would do rescaling, but I guess I'm wrong.
So I tried setting the images with 768x1004 to width="window.innerWidth". That shrinks it down on the phone pretty well, except it still stretches past the bounds of the screen a bit. As for the iPad it shrinks the width down some so now there is a gap between the image and the wall of the screen.
Any ideas how to get a clean and simple auto resize to adjust to the screen preferably with just the 1 image. Or else how would I set it so there are multiple images and it puts in the image for the iPad size if its an iPad being used other wise the phone sized images if its a phone being used?
Thanks
I´m pretty sure, that you can´t, without really ruin the quality of your picture resize the image. But I do know that you can use a script to redirect your user to the site that fits for their screen. See this site http://www.dynamicdrive.com/dynamicindex9/info3.htm or Google "Screen redirect" and a several alternatives appear infront of your eyes! :))
Related
I'm running into a problem. When I view my website on a computer and phone, it's built perfectly; but, when I pull it up on an iPad, the background images are like blown up. My website is http://www.zwdalpha.com/, any help will be very appreciated! Also, my Github is https://github.com/zcsmouse970/zwdalpha
To address the issue, you first need to understand what is happening. Background image sizes are handled with the background-size attribute, which you currently have set to cover. cover is great for large screens because it makes sure the image "covers" the height of the element. This allows for clipping on the sides to make sure it fills from top to bottom. contain is the opposite of that. It makes sure you can see the entire image at all times. It does this by making sure the width is 100% and the height is left to clip or expand. When you see on tablets and smaller that the images are "blown up", the CSS is making sure that the entire content area is filled with the image, and it does this by making sure the height of the image fills the content pane. Here's where we get a little more detailed.
You have your images setup as fixed. Obviously this was the effect you were going for, but lets think about what needs to happen here. Now the image needs to be covering the screen from top to bottom because it is able to be viewed anywhere the content pane is while being fixed. So now your image is covering the entire viewport. You can see the changes it makes when you change it to background-attachment:scroll;. It instead fits the image into the content pane instead of the viewport.
All of that being said, the way you can change this is by implementing media queries and switching backgrounds to cropped versions that are more appropriate to the viewing dimensions.
Your issue appears to be to do with background-attachment: fixed not behaving as expected.
Try background-attachment: scroll
I am trying to convert a poorly designed template to a responsive design, found here:http://www.crhinc.com/about-mobile.html
Im having an issue where on desktop browser sized to mobile the template looks and works great, but on android and iphone, the page is larger than the viewport. i know i must be missing something, but as you can see, i have outlined the elements just to get try and see if i can find out whats in there that is stretching it outside the viewport and cause mobile phones to scroll from side to side but not desktop browsers.
i set the body up for 300px width just to see if i could find the rogue element, but put it back because it did not work. there are a few tables in the content, but all set to 100% width.
for some reason, it almost looks like the width in the desktop and on mobiles or not actually the same.
Jeff
Do you actually think it is the viewport? Do you have the viewport set with the right content?
Maybe this link could help.
Or is it just the CSS? In that case I would recommand you searching for width and such. Trying to find big numbers..
Setting a specified width should be for specified screen sizes. Otherwise make it max-width.
How can I force mediawiki to disable resizing and use the original size of my image? My main problem is that I'm uploading small parts of screenshots. If I don't use the original size then they look awful. (Imagine a 237px wide image resized to 400px....) But I don't see any option for that.
http://www.mediawiki.org/wiki/Help:Images#Size_and_frame
By simply using the image name, it will fit the image to screen which is really bad! For example, a 300px wide screenshot cutout looks awful on a full hd monitor... You could say that the image may be too large for the users' screen but in my particular case that is not the case. I'll always be using small images (300px and smaller) and the users will always watch these pages on desktop monitors.
I'm sorry I was very dump. If I don't use any option then it is displayed in its original size. I was mistaken because somebody has changed the zoom level of my browser, but I did not realize this because the monitor resolution was so high...
I'm working on this website and I can't figure out how to fix the problem.
if you use a fullscreen browser window you will see it perfectly (any major browser) but if the window is smaller, it shows the horizontal scrollbar plus cuts the website on the right of around 50px.
I can't change the design to make it more easy to do.
here's the link, you can see both html and css
http://www.ircm.comunicazioneimmagine.eu/
Using fixed size layout will cause problems with different screen resolutions. You should use fluid layouts to resolve the problem.
Fluid Layout Guide
Responsive Design
If you don't want to use fluid layouts.
Put all the content into a div with margin: 0 auto and add text-align: center to the body (IE explorer compatible). Choose a background that looks nice with the page and you're done.
But if the screen resolution is less than actual page size there won't be any solution but resizing the page manually.
the horizontal scroll bar is there cause your page exceeds the innerheight of the browser... my current res is 1920x1080 and I cannot see the bottom of the page. Perhaps try reducing the size of the big IRCM at the bottom.
Is an image displaying in a lightbox script (e.g. prettyPhoto, lightbox, thickbox, etc) affected by high pixel ratio devices?
For example, if I had an 800px wide image up in a lightbox, will it be shown at 800 CSS pixels or 800 actual pixels? To probe further, is an image displayed raw in the browser affected in the same way?
If images displayed with lightboxes are affected by retina screens, what's the solution? Simply link to a larger image? (assuming the script auto resizes images to fit in the viewport)
Perhaps someone needs to develop a new jQuery plugin. :)