As I am developing an mobile app, I set "width=device-width". However, this would lead be image be magnified to fill the screen when viewing in a normal computer. Of course it should be what it is supposed to do, but would it be possible to make it so that the image would at most appear as big as its original size and no more?
Use css:
max-width: "somethingpx";
Related
I'm working on a website that has quite a unique slideshow...
As you can see, the top of the image needs to curve in a weird way, and then blend in to the background. Currently, this is just set up as an overlayed <div> that lines up with the main background image, but because the site is responsive, things get funky at certain resolutions.
Is there any way to use CSS to accomplish this same effect? I've been experimenting with border-radius, but I'm not sure it's possible. I'd even be happy if it wasn't 100% cross browser, as it can degrade to just a straight edge.
Thanks.
I've done some work with SVGs as section separators.
The idea was to place a SVG above the section that it should "clip" and use negative margins (or the top property) to lower the separator onto the section. The section can have a bg image to achieve this effect.
In this demo, I was using 100% width separators: http://jsfiddle.net/fmpeyton/NuneR/
A word of caution: With 100% separators like in this demo, you might get some 'bleed' from the image underneath. It happened in FF when I was prototyping that JSfiddle. I wasn't really able to alleviate this without some hacky widths/margins.
Hope it points you in the right direction.
Edit:
To expand upon my answer, there are some other ways to clip/mask an element. Here are some resources I've been looking over when looking for a solution:
http://www.hongkiat.com/blog/css-masking/
http://www.html5rocks.com/en/tutorials/masking/adobe/
Most of the clipping/masking properties are not cross browser compatible, so use only in a case where you can fall back to a full, unmasked image.
You can use Properity for css 3 :
transform:rotate(10deg);
border-radius:7px;
box-shadow:4px 5px 6px #DDD;
It will create good attraction for images and visual contents. Best of Luck.
I've really got no clue how to describe the subject in English, so here is more info:
Check my (temporary) website on your phone (no matter what kind one) -> Click
What you'll see is the whole site including the background spread over your screen, instead of focussing on just the container in particular.
My only question is: How do I let the screen focus on the container, instead of the whole site. By other words: Ignore the background and spread the container over your whole screen.
Quick mockup:
What is the best way to achieve it, so it adjusts it to the whole screen of your phone?
Thanks!
Try this:
<meta name="viewport" content="width=device-width">
This will "zoom" your device to a reasonable value. ("reasonable" still depends somewhat on the vendor.)
In your case you can play around with device-width parameter and enter a value which suits you. But better stick with it for the time being.
Starting from this you can create different css styles via media-query and e.g. specify
#media (max-width: 400px)
.my-content-div {
width: 100%;
}
}
to scale your content to 100% on mobile devices.
Making a true responsive design is still a big mess but it can be done. Key is, that you start with something you can at least loosely rely on and then work your way from there.
If you want to make it responsive I think the best solution is by using Media Query instead of adjusting the viewport. Set #container to 100% width and height and set the margin to 0.
Iv noticed that around 680px the text on http://www.smashingmagazine.com/ increases in size. This is done with a media query setting the body font-size: 1.1875em. However when you get down to a smaller size like you would be on a phone then the text becomes the normal size again.
Why would they do this? I thought that one of the concepts of responsive design was to give control to the device / user. So if the body text is best at 1em then you simply let the device use its default to determine what size the text will be. But it seems they have decided to override this device default.
Just give size with sp example 12sp. it will take size for all resolution..
I'm building a responsive site using WordPress, and images are automatically set to height:100%; width:auto; and the div resizes according to window size. But this often means some images have their height set to higher than their actual height causing pixelation. What i need is something like height: 100%; width:auto; max-height:"image height here". How, if this is possible, is this possible?
The page where this is an issue is here: http://wheretoimmigrate.com/onthemouse/?portfolio=atomic-clothings-2012-campaign
I resolved it by simply making the images larger by adding a transparent background of larger size and different proportions. Tricked the system into treating it like a larger image. Worked perfectly.
i couldn't find any information regarding system tray icons, what size should they be in to get the best possible quality. Should i use more than one size (16x16,32x32,64x64)?
I'm currently using 16x16 .ICO icons and they look disorted.
They are small icons (ICON_SMALL). You can find out the size by calling:
GetSystemMetrics(SM_CXSMICON)
I think it's pretty safe to assume that they are square, but if you are paranoid then you can always inquire about SM_CYSMICON.
On my Windows 7 machine they are 16px in size. But if you are using font scaling then they will be larger. For a 125% font scaling (e.g. large fonts) you will need a 20px icon.
If you don't have a 20px version at hand then the best approach is to generate one on the fly and put your 16px version in the middle of the new 20px icon.
Update
The documentation of NOTIFYICONDATA recommends using LoadIconMetric passing LIM_SMALL which is equivalent to the approach I outline above.
However, the NOTIFYICONDATA topic also says to use an icon resource containing just16px and 32px versions of the icon. That advice is bogus because, as anyone can see for themselves, notification icons under large fonts are 20px icons and LoadIconMetric will have scale from 32 to 20. I would recommend supplying 16, 20, 24, 32px versions.
On XP LoadIconMetric doesn't exist so you'd need to implement a fallback routine.
I believe it's best to create your icon in multiple sizes and let Windows choose the best one. You're never sure how large the system tray is, because different users may have different settings.
That could also be the reason yours seems distorted. Say you're using a 16x16, but you've set Windows to display them 18x18. If you haven't provided an 18x18 icon, it'll be distorted.
See this question and Larry Osterman's answer.