I have an image in my footer with width:1363px and height: 100px. This looks fine on my desktop computer with resolution 1366*768 but when I check the site with resolution 1024*768 the size of the image is not shrinking.
So my question is how do I adjust the size of the image according to screen size using css. I used media queries and changed the width and height of image but it still remains the same. I also tried some other tricks with no luck.
You can simply set the image to width: 100% and it will scale with the browser.
Demo JS Fiddle
HTML
<div id="footer">
<img src="~/yourimage.jpg" />
</div>
CSS
#footer img{
width: 100%;
}
Without seeing your image, it's difficult to advise, but an alternative is to not use a full width image and use a background colour instead:
Demo JS Fiddle
Or use a horizontally repeating image:
Demo JS Fiddle
Try
img{width: 100%; max-width: 1363px;}
This should shrink the image down with the size of the browser, but won't distort the image on resolutions higher than it's maximum width.
You can use css bootstrap responsive for this.
http://getbootstrap.com/css/
It shrinks the contents of your div according to screen size.
But if you want to do it manually, set width of footer content to (example)
width:100%
Then set a specific size for footer (example)
width:1024px
After that use #media queries
http://css-tricks.com/css-media-queries/
Example
#media all and (max-width: 1024px) and (min-width: 768px){
#footer{
width:800px; //or something like this
}
}
you put that image in container tag and after that give a width t0 that image and make height auto of that image.
Related
making the image on mobile device longer!
i have a image ( the header of the website) when i resize the window into mobile format it resize the image . but i want the height of the image (header) longer!
is it possible?
height: auto;
max-width: 100%;
but that doesn't make the job it make it scale the width and also the height '
i need the height longer.
when i scale it on mobile device the header image of the website should be longer
maybe something like this? you can set a custom height (i.e. 300px) that will not change for any window width
<div class="image"></div>
in CSS
.image { background:url('https://cdn.pixabay.com/photo/2018/01/25/14/12/nature-3106213_960_720.jpg') no-repeat center center; width:100%; height:300px; background-size:cover; }
If that image is background image you can set padding to the header section and adjust to values to your needs. You can then target media queries for mobiles.
#header {
padding:300px 0;
}
I need to scale my images as soon as screen / browser size changes, keeping ratio and position.
I know about width: 100%, max-width; height: auto - and so on - but none of it is what I'm looking for - it really has to be exact to my line: start scaling images at once, when browser window even is minimized to 99%
Here is the code to show you:
<div class="foo">
<img src="http://i.imgur.com/RYjIHr9.png">
</div>
<style>
#media (min-width: 100px) and (max-width: 768px) {
.foo img {width: 100px;}
}
</style>
Live example:
https://jsfiddle.net/20t24pqh/2/ - try to resize the browser window
what is your code? I think using bootstrap will help you it has an img-responsive class. that will make your image responsive to the windowsize. please refer http://getbootstrap.com/
Cloudinary offers a nice responsive support for images.
See: http://cloudinary.com/blog/how_to_automatically_create_images_for_responsive_design
Experts,
I have a page containing thumbnails:
http://ulrichbangert.de/heimat/Bad_Harzburg_Oldtimertreffen/2015-04-05_Bad_Harzburg_Oldtimertreffen.php
My intention is to reduce the size of the thumbs to 50% for a small screen so that more of them fit on the screen. I already have a solution by JS but would like to use CSS instead. My latest approach uses scale:
CSS:
#media only screen and (max-width: 768px) {
a.th200 {
-moz-transform:scale(0.5);
-webkit-transform:scale(0.5);
transform:scale(0.5);
display: inline-block;
}
}
HTML:
<img class="th200" src="2015-04-05_Bad_Harzburg_Oldtimertreffen_01_th200.jpg" alt="Oldtimertreffen in Bad Harzburg">
Scaling down works fine so far as Firebug indicates but there is a lot of space between the thumbnails so that the disired effect is not achieved. What causes this empty space? How can I remove it?
I would use a DIV as a container and then a DIV for each thumbnail, and scale the thumbnail DIVs down. If the images inside are 100% the size of the DIV then they will scale down with it. This will eliminate the spaces you are seeing at the moment.
I've got an image that has 90% width, but with a max width of 640px. I want to set a specific style when the max width is reached. So, I was thinking about a style that is applied depending on the width. Here there's a similar question:
CSS targeting specific images
But I don't have a width attribute. How can I achieve this (without using js, if possible)?
To further user3127242, you can use media queries to add landmarks where the image should change. In order to effectively change the image source, you should also consider using a div with background-image set. Example:
HTML:
<div id="fancy"></div>
CSS:
#fancy {
background: transparent url(...) 0 0 no-repeat;
width: 400px
}
#media only screen and (min-width:400px) {
background-image: url(image1.jpg);
}
#media only screen and (min-width: 500px) {
background-image: url(image2.jpg);
}
Example fiddle here: http://jsfiddle.net/27UjQ/2/
The only way without js of which I can think is using mediaQueries. Doing the math I calculated the size of your image will be 640px, when the screen's resolution is 1064. Therefore you will need to add this mediaQueries code to your css, which changes the img's style when this resolution is reached
#media only screen and (min-width:768px) {
/* Your changes to the image's style */
}
Here's a link. Try resizing the window to see the changes when the certain width is reached.
It would be great if you could provide us with a working example or your code.
But try the following:
img {
width: 90%;
max-width: 400px; /* just an example */
}
I have a wrapper div which wraps the header of my page like below:
<div id="wrapper">
<div id="centered_slideshow">
// Slideshow here, covering approx 75% of screen width...
</div>
</div>
#wrapper{
width:100%;
min-width:980px;
background:#000 url(../graphics/header_wrapper_bgr_left.jpg) no-repeat bottom left;
}
#centered_slideshow{
margin:0 auto; //for centering the div inside the wrapper
}
Now the entire website looks great in mobile devices, except for this one background image.
The mobile device has a significantly smaller width. This results in the background image beeing "moved" into the bottom left of the mobile screen, and since the slideshow is in the middle of the screen it partly overlaps the slideshow. ie the background image overlaps the slideshow, which is my problem.
How can I make the image not beeing shown in mobile devices, alt making the background image not move at all when the screen width gets smaller (as in mobile devices)?
If you need more input let me know.
You could use a media query to check the screen size and then serve the mobile device with a different background. So something like
#media screen and (max-width: 480px) {
#wrapper{
width:100%;
background-image:none;
}
}
More on media queries here: http://www.w3.org/TR/css3-mediaqueries/
You could also use jQuery to do this, but I would advise this only if you are already using jQuery for the site. (Best not to overload the user with too many script downloads.) In this case,
if (screen.width<480){
$('#wrapper').css('background-image','none');
}