I've made a simple website that is entirely scale-able...except the images. the body and all, the divs are set to percentages, in fact my purpose for designing this way was to practice making sites that would scale to any screen resolution. Everything went smoothly except the images, while the rest of the page grows or shrinks with the browser, the images either overflow or become tiny(when zooming in and out on browser). setting the image width and height to a percentage doesn't work because stretching the browser too far horizontally or vertically would cause the image to distort.
note:
I'd rather not have to hide the overflow, if I'm correct that would just cut the image off when it becomes to large(correct me if I'm wrong here)
and setting the height/ width to a max/min didn't seem like an ideal solution either.
but this problem seems to be one that I can't believe others have not encountered, so I hope someone can help me figure out a solution. please help, please...this is stressing me out :(
Style the img tag:
img {
height: auto;
max-width: 100%;
}
Now adjusting the size of the element containing the image will cause the image to scale itself accordingly.
Try setting just either height or width, whichever is more important to you. If you set both, the browser will follow your rules. If you just set width, the browser will scale the height down accordingly.
I'm working on a project like this as well, and I used
img { width: 100%; }
as well and then made sure to size the divs around each image accordingly.
I understand your concern about the images distorting at a certain size, but for me the ability to scale was most important here. I created the images so that they looked best at the size for my target audience.
If you create the images at the largest size you want them to look clear, they should also scale down, just be careful about file size if bandwidth is an issue.
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 have no idea how to fix this. I've included a picture of the site.
This only happens on larger screen monitors, for some reason. On my 14" laptop, its' fine. Anyway, is there any way to ensure that content starts underneath a background image? And not overlap it, as shown.
Thanks so much for any help.
https://i.stack.imgur.com/6PbUr.jpg
Well, it's complicated to work with css relativization when your main image of the site (the takes nearly all the screen) is into background or other rules that don't fill the rest of the elements. The best that you can do is to relativize body.home margin-top with percentages, but I highly recommend that you put that image inside a div container with width 100% and background-size cover and start to work towards that. Any other solution will be hacks and lacks of good practices, because if you want (and one day you will) change de background-image, all your elements will need a new proper location, obliging you to change css every time.
I have looked at many different peoples answers to this problem but they only account for one image.
I am having a problem with the the two images that i have placed in my header, when i resize my browser i want them to scale down with it so that they dont displace my whole site.
i have it hosted in dropbox so you can see what my problem is: https://dl.dropbox.com/u/13722201/Dorset%20Designs/home.html
also another problem im having is un attaching the footer from the bottom of the screen and putting it below the body so users have to scroll down.
p.s I attached the footer to the bottom many months ago and I forgot how to undo it.
SORRY FOR THE TERRIBLY MESSY CODE
thanks in advance
Arran, 16
Here's how I'd do it. First, style each image using CSS to have width:100% and height:auto. This makes them respond to the sizes of their containers. Lose those width and height attributes from the img tag - I'm not even sure if those are valid anymore.
Now here's where the clever part comes. Your images are 550px and 298px wide, which is roughly a 65%:35% ratio. When the header is at its most narrow point before breaking, it's about as wide as the sum of the two. So give the big image's container max-width:65%, and the small image's container div max-width:35%.
This way, when the browser window is smaller, the images scale down correspondingly - and don't become larger than they need to be when the window is wide. I tried it out on your page, and I think it worked - see if it works for you. :)
What is the best way to dynamically change the width and height of an HTML5 video within a webpage? The kind of behaviour I'm referring to is the same thing in the intro video of http://flipboard.com/
When the window is resized, the video still takes up 100% of the viewable size (without scrolling). I noticed that the video gets resized to a certain degree, but stops resizing and gets cropped at some point.
What is the best way to get the same behaviour? I want to have a video take up the entire viewable area of the browser without scroll bars. This is only on a desktop/laptop, I am not considering any mobile devices ATM.
What I have in mind right now is to dynamically change the width/height properties of the video to fit the viewable area using javascript, but also set a minimum size such that the video doesn't get distorted. The video can be placed in a container that is always centered, so if the browser gets to a size that is too small, it effectively gets cropped. I'm not sure if this is too long-winded and if there is an easier way.
Thank you.
It looks like they have the css properties of height and width set to 100%. If you use an element inspector like the one built into chrome or firebug for Firefox, you should be able to see exactly how they structured the html/css for the video element as well as the div its nested in. Then, as you said, also set a min-width/min-height property.
Unless I'm misreading your question, it should be that simple. Hope this helps!
you could do it with "Responsive CSS", there are some ways to do that,
you could set the viewport, max-width, min-width, etc.
This link have a nice explanation how to do that : http://kyleschaeffer.com/best-practices/responsive-layouts-using-css-media-queries/
I was reading Web Content Accessibility Guidelines 1.0 (sec 3.4, page 13) where it says to use em rather than pt.
My question is that the images that you develop for a web site are done in terms of pixels. So if you are using relative sizing for them, the browser will have to scale them. Is there any good techniques to ensure that the pictures do not get too distorted (i.e. bits become too blurred etc)? Alternatively if you chose not to scale the images, is there any techniques to ensure that the layout does not get corrupted?
I recommend you have a read of Responsive Web Design by Ethan Marcotte. He talks about a technique of not specifying any height/width on your img tags, and instead set the max-width to 100%:
img {
max-width: 100%;
}
In fact, this will work for any fixed-width elements like videos/flash etc
IE6 and below don't support max-width properly, so you can set width: 100%; instead, which is a basic workaround.
The book also explains how to use AlphaImageLoader to improve image scaling in IE7 and below.
Check out the bottom of this sizing study done to compare px to em sizing techniques as images grow larger/render at lower percentages.
Under the section titled "Information", there is even more to look at.
It appears you just have to keep playing with the number after the decimal point, and get those F5 muscles stretched and limber. ;)
It generally does not make sense to specify image dimensions in em. It would not improve anything and would just make images blurred. Use em for text only, and let images be kept in their original size. Additionally, you can use IMG {max-width: 100%} if don't want images to overflow their container on narrow browser-window sizes.