I am trying to build a website for myself.. I want to use an image as the header... I have made sure that my background will scale itself for any screen resolution... How do i make sure the image(header) will also scale it self according to the screen resolution...
for example: my image is 350px int width and 130px in height.. i want this to be the size when screen resolution is 1280X768.. and should change proportionally based on screen size..
Please tell me how to do this preferably using CSS.. i am also fine with js or jquery
Thanks in advance
Raj
If you only specify the width in css, the height will scale automatically. You can easily specify the with of the image relative to its parent.
In your example you would have to specify width: 27% (1280 / 350). Note that the parent will have to be 100% wide.
You can get the screen size from the DOM using screen.width and screen.height. Then you can write some JS to load or replace with the desired image or adjust the height/width attributes on the image (which would scale it, but doesn't always look great).
There is a good article on fluid grids by Ethan Marcotte, http://www.alistapart.com/articles/fluidgrids/
You can apply these principals to your images using CSS, he does on his personal site. There even good apps to help you out.
this one has a read me -> web duck
http://inteldesigner.com/web-duck/about.php
this one has more features -> em calc
http://riddle.pl/emcalc/
Related
I am facing CLS problems and https://pagespeed.web.dev/ recommend me to set explicit width and heights on images, but i just don't understand how i suppose to do this. For example:
If i set width and height for mobile, problem will be actual for desktops and tablets.
I am using media queries for changing image sizes for different devices, but to fix CLS problems i need to add explicit width and heights on image to reduce any shifts on page
I am using dust templates
Any help will be appreciated, thanks
This Pagespeed Insights message is misleading, you are NOT required to set the width + height of your images using the HTML attributes, you can also use CSS.
Set a width + height in CSS: .your-image { width: 200px; height: 150px; }
I'd like to buy a license of cssSlider at www.cssslider.com, but I need to get it to work first.
I want a responsive full-width slider. As the browser window decreases in width, I want to keep the slider height intact at first (so only the sides of the slider image will be cut). After a certain breakpoint (when browser window has same width as the width of the content wrapper on my site), only then do I want the slider to get smaller vertically as well. This way, the slider won't get ridiculously thin on smaller devices. I hope I explain myself well.
I managed to do this on my site with a single image used as background, using a transparent .gif with a width of 1120 x 500:
https://www.easterisland.travel/
I know it's possible with cssSlider, since they have this feature on their first page top slider (http://cssslider.com/), but there's no option to choose this with the cssSlider executable program.
Any clues? Thank you!
For smaller screens, they set the container height to auto inside a media query. Then they appear to serve different images based on screen width. So it looks like 'responsive images'.
Responsive images can be complicated depending on whether you care about IE, your server configuration, and whether you know php or javascript, etc etc. Here's some info: https://css-tricks.com/which-responsive-images-solution-should-you-use/
Alternative solution: you could use the newer css3 units of vw and vh.
vw and vh are percentage of the viewport. The browser support for this will be roughly equal to the support for css3 sliders, so you should be ok!
Try replacing their media query, something like this:
#media only screen and (max-width: 800px) {
.csslider1, .csslider1 > ul {
height: 75vh; max-height:450px;
}
}
In the end, I found this to be the correct code:
#media only screen and (max-width: 1500px) {
.csslider1,
.csslider1 > ul {
height: auto;
}
}
I found the cssSlider program to automatically generate the behaviour I was looking for with the right settings. All you need to do is to put the breakpoint you want as image width, with "Full width" checked.
Hi I don't know how to solve this...
I want the element marked with a red rectangle in the images to move depending on the size of the screen ALIGNED to the containers below ALL THE TIME. I'm making a responsive website with the different media screen instances but I want to be sure that this element keeps in the same alignment all the time. How do I do that? No JS please.
http://www.awesomescreenshot.com/image/58399/669844960fdd9761084f64bae5d29112
since you haven't provided any code for what you have so far its difficult to help you. However, I think I understand what you need and you need to specify some width constraints to accomplish this:
you will need a container inside the header that will have the same width as the content below. Here is a working fiddle
css {
width: X%;
}
I'm working on a google map page for a jquerymobile site. I've got the map behaving as I'd like, and it displays beautifully, but the map element is too big - I can't figure out how to scale it to fill all the available space between the header and footer.
So I have:
header (let's say it's 30px tall)
footer (let's say it's 20px tall)
Since there are so many different screen sizes for mobile devices right now, I want the map_canvas to be device-height minus 50px tall. Can I do this in css, or do I need to use javascript? (Not averse to that, but it would be great to use pure css...)
You can use height: calc(100% - 50px) in modern browsers.
Due to general viewport wonkyness, auto-height is a slippery issue and not implemented reliably.
I've needed to implement something similar before on my mobile sites, and I found this article on Quirksmode to be infinitely useful - http://www.quirksmode.org/mobile/viewports.html
In your case, you'd want the height to be
document.documentElement.offsetHeight - (header.outerHeight() + footer.outerHeight())
or if you want to hardcode, document.documentElement.offsetHeight - 50. Of course hard-coding the value is a less maintainable way to go.
You could use javascript, or you could use relative heights. For example, set your header's height to say, 10%, the footer to 20%, and then you could set your map's height to 70%.
I am stuck on how should I cope with the screen resolution problem ....
If I design for High resolution(1280px wide) a very long horizontal scroll comes up on low resolution monitors
If I design for low resolution the website seems to utilize jus a little space on the browser
please guide me how to get around this problem any help would be appreciated thanks
There are several suggestions...
Design your site to center everything horizontally, along with designing with fixed widths. Then make sure that the most important part of your content stays in the center. Background images can fill the background area without causing a horizontal overflow (the scrollbar being shown).
Use a design that fills 100% horizontally and make placements based on percentage width's. This may be difficult depending on your design but if you use some fixed width aspects from #1 that can help.
Use conditional CSS loads. Only recommend this if you really need very different layouts for different screen sizes (like mobile sites). You can use Javascript to get the document.body.clientWidth and document.body.clientHeight to get the current window size and load something based on this. Remember though... a user can resize the screen so it won't be as great as #1 or #2.
Google for "Responsive Web Design"
U have two choices:
1-Make your layout width about 980px. so that users with 1024 resolution and higher will see all the screen without scroll.
2-Make your layout 100% width. without specifying constant width for your elements in pixel set their width in percent. so that every body with any resolution will see the whole page without scroll bars.
I had this problem before...
CSS can't detect screen size, but Javascript can. I don't remember how, though. But it can tell you what size does the browser window have. Depending of this size, you can then link to a CSS or another.
I always use the rule of designing for the 978px Grid.
#container {
width: 978px;
margin: 0 auto;
}
This means it will fit in browsers down to 1024x768 and display centered in higher resolutions.
screen resolution problem is not solved by any margin , padding ,absolute and relative when it comes in to body element .....
this is one of solution which i can prefer for one of case :
use offset in window resize function to another element from which you want to alignment (offset top and offset left)
example :
$(window).resize(function () {
var p = $("#divfromwhichyouwantalignment"); var offset = p.offset();
$(".element1toalign").offset({ left: offset.left });
$(".element2toalign").offset({ left: offset.top + 350 });
});