I have set up a background-image for large and medium screens.
I have a touchbar macbook and it fits perfectly.
If I play with the mouse to make the window smaller (to see how it would be for different resolutions and less pixels), it's completely responsive and looks fine (it cuts a bit the right part of the picture but it's not zooming).
Same when I open the developer tools, the Ipad pro version is half-cut but not zoomed.
But when I try to go on the website with an older macbook, the image is completely zoomed and does not fit the screen anymore.
I don't understand how there can be such a difference as we have different resolutions but same inches.. And as when I play with it on my computer, the image stays at the right size even with less pixels.
How can I solve this problem? Why is it doing this? I am fine if the image is a bit cut on the right or left side but I don't want it to be zoomed.
I have tried - height: auto, width: 100vw, background-size:contain (but it's too small) and no-repeat... basically everything with css
background-image: url(/assets/dessin-ba68b8b….png);
background-size: cover;
height: 100vh;
Thank you
When you use cover for background it is guaranteed that the same image will NOT look perfect on all screen sizes, since the browser needs to display it in different dimensions.
To handle this you may generate several images, each for screen size you aim at and use CSS media queries to apply the appropriate image for each screen size.
Related
I am working on blog at blogger and it has got a responsive template. When I see logo on my blog on the computer it looks fine but when I go to iPhone it is kind of blurred and I don't know what is the reason for that.
I tried to edit logo and change it for different one but the result is the same...
Link to my blog is: www.5minLunchBox.blogspot.com
Does anyone have an idea how to fix it?
Thank you!
Your natural width is 220px width. But your mobile viewport width exceeds that amount to 320px to 480px depending on the mobile device. Not to mention, you are using a .jpg image which is highly pixelated.
SOLUTIONS
Familiarize yourself with .svg technology. Using an SVG will allow you to manipulate the image at all widths and make use of your max-width:100%;.
Use a larger image (no smaller than 480px) this way, you can still resize down without losing resolution, and not have a need to re-size up, which is your problem here. You are expanding .jpg pixels
Once you have added a larger logo, hopefully a .png at least, but preferably an .svg, do the following:
#media only screen and (-webkit-min-device-pixel-ratio: 1) {
.widget iframe, .widget img {
width:100%;
max-width: 320px;
}
}
This happens because the real logo jpg dimensions are: 200x90 pixels. On the desktop version set the width to 200px but the smartphone version set the width to 100%. For this, on an iPhone 6, the logo width become 375px and the image appears blurred and pixelated (on iPad become 768px).
You could augment the real size of the jpg logo, but the file size could be too big. If you can change the image format you could convert the logo to svg.
I have a simple question about the <video> tag.
I want to build a simple full screen video chat that runs on PhoneGap (mobile) and desktop browsers (Chrome).
What I need is the video to stay full screen both if it comes from a mobile camera or desktop browser camera. I guess they will have different aspect ratio and I don't understand how to merge the problem.
What I am afraid of is, when video comes from a mobile camera then how could it fit the entire browser screen (full screen) which is bigger?
I am sorry if I haven't tried anything yet, but I just would like to understand what to start with, the logic behind.
Any tip appreciated!
If you don't wish to change aspect ratio of video, than you can only make full screen canvas. Video will still be shown in origin aspect ratio and around it will be black spaces. To make it full screen, use width: 100%; height: 100%; position: fixed;. Keep in mind that browser window not always is in common aspect ratio (16:9, 4:3 and so on) because you can view website in not maximized window. Than aspect ratio will be custom.
I've got the page divided into different parts like header, footer and body. Now i need to set images on the background of header and footer. Should i choose a bigger image which can be re sized according to user's system dimension or should i keep it constant size?
How to keep an image withing the section that has been decided for it?
i'd create separate images for the smaller devices as the smaller file sizes will help when loading on tablet or mobile. Load in the different images using media queries
header-bg-desktop.jpg
header-bg-tablet.jpg
header-bg-mobile.jpg
I agree using separate images is beneficial for performance (especially on phones), though if you wanted to do this with CSS only, you can use background-size: cover, which will ensure the background image does not stretch, but also fills in the entire parent container.
E.G. http://jsfiddle.net/YNBw9/
You want to use background-size: cover to get the images to fill the containers at different size. You also want to use media queries, if possible, to deliver the right sized image to the right screens. That is, you don't want to overload a small screen with more pixels than it needs (not the screen, the bandwidth and load time) and you don't want to scale up a crappy image for larger screens.
http://plnkr.co/edit/bMryzPTGzUK6Y5BbDpWh?p=preview shows an example. Resize the right pane.
More on media queries:
https://www.google.com/search?q=media+queries
More on background-size:
https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
http://css-tricks.com/perfect-full-page-background-image/
It largely depends upon your website's target audience.
If you are going to target mobile, tablet and desktop all three user bases, then you must supply images for all of them with different background image code via CSS.
Here is a very good reference to get you started,
http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
If you target desktop users only then you need to supply one-background image size and that should be enough.
Example code,
<style type="text/css">
body {
background-image:url('<%=request.getContextPath()%>/images/logo.jpg');
background-position: left top;
background-repeat: no-repeat;
}
</style>
I often use a header with a full width background-image like this page http://thegreatdiscontent.com/adam-lisagor
What kind of media query -stack would you use for the background image?
I would like mobile devices to use images that are not too big in filesize, but also have retina devices have retina-images.
So maybe have something like a one big media query for retina macs, maybe one with really compressed image with retina size for the retina ipads. Maybe one for small mobile devices, retina and non-retina..?
It get's pretty complicated and of course I'd like not to have a list of 20 media queries to target different screen sizes with different resolutions and different (assumed) internet speeds.
Thoughts? What devices would you prioritice?
Thank you.
I think you misunderstand the point of CSS media queries. They won't change the file size being served. CSS is just client side script. If you want to serve images with a smaller file size for smaller screens or slower internet connections, you need to do that on server side.
Take a look at Adaptive Images to do that: http://adaptive-images.com/
Media queries only allow you to resize the original image, so it still loads the full size image, then resizes it.
The background-size property works nicely to keep a background image filling the available area. E.g.
#header {
background: url(image.png) no-repeat;
background-size: cover;
}
You can save the image at a large dimension but at a relatively low quality and it will look good on all devices, including retina screens, as explained here: http://blog.netvlies.nl/design-interactie/retina-revolution/
I want all images for a mobile site to be 640px wide, based on iPhone screen size.
All images should be the full width of the screen when shown img { width: 100%; height: auto; }.
For the images that are smaller than 640px wide, is it better to use the above CSS to scale them up, or should I use Photoshop or something to scale the actual image up? Does it even make a difference?
So does scaling up an image using CSS result in a better or worse image quality than using something like Photoshop to increase the size?
Scaling images up doesn't go well for the quality of said images, you need to sort out your priorities on this one. You can work on those images and increase the quality and size of those images in Photoshop so you don't lose any quality when resizing, but this will increase page loads or you could lose some quality, but improve page loads with smaller but more crappy images.
If you really want to target each device (computer vs mobile) perfectly you can use javascript to switch out the images. This can be done really easily using http://foundation.zurb.com/docs/components/interchange.html or similar libraries.
If the images are graphics or icons I might suggest just making them svgs and using those instead as they are crisp at a greater range of resolutions. If you go with this option its best to make their sizes multiples of two.