I have a responsive website, where I am resizing all my images in the corresponding CSS3 media query's viewports. I'm wondering if there's an easier way to state that I want all my images to resize maintaining their original stated dimensions as opposed to manually resizing each accordingly with max-height, width, etc. Any suggestions?
EG Below.
/* Smartphones (portrait) ----------- */
#media only screen and (max-width : 320px) {
#logoimg { max-height: 100px; max-width: 100px; }
}
I believe declaring img {max-width:100%} should do the trick. The image will scale down and maintain its dimensions.
Use background-size: contain; or background-size: cover; as appropriate.
This is what's needed for what is commonly referred to as fluid images:
img {
max-width: 100%;
height: auto;
}
The first declaration makes sure all images won't exceed the width of their containing element. The auto declaration for height ensures all images retain their proportions when scaled down even when they have size attributes in the img element.
This way you could just declare width or max-width on the container element of the img without having to worry about dimensions/proportions.
use picture element
http://caniuse.com/picture
manual http://www.html5rocks.com/en/tutorials/responsive/picture-element/
<picture>
<source
media="(min-width: 650px)"
srcset="images/kitten-stretching.png">
<source
media="(min-width: 465px)"
srcset="images/kitten-sitting.png">
<img
src="images/kitten-curled.png"
alt="a cute kitten">
</picture>
Related
Can i put media queries for image like that. I mean it works but i wonder if it looks absurd.
Because my image looks so small in mobile. Also vh didnt work.
.banner {
max-width: 100%;
min-height: 185px;
max-height: 270px;
}
Personally out of preference if the image isn't the right dimensions for a banner I would set it as a background-image to <div>. This way you can set it to cover the area and center it, you will lose area's of the image but at the same time, it will always cover the area and work responsively.
.banner {
width: 100%;
/* can also set to 100vw if you wish */
/* specify height - this is a personal favourite of mine at times */
height: calc(100vh - 185px);
/* if you wish to keep max-height */
max-height: 270px;
background-image: url('[insert route to image file]');
background-size: cover;
background-position: center center;
}
The changed markup if you need it
<div class="banner">
<!-- insert any child elements if needed -->
</div>
If you wish to set further media queries and you are working with a mobile first design with
<meta name="viewport" content="width=device-width, initial-scale=1"> set in your <head> then use them like so
Tablet Media Query
#media screen and (min-width: 768px) {
/* Set new styles here */
}
Desktop Media Query
#media screen and (min-width: 1024px) {
/* Set new styles here */
}
Not absurd, but if you're not getting the desired effect, it is wrong. There are many ways you could implement your banner, the easiest (I'd think) would be:
.banner {
width: 100%;
height: 185px; {/* or whatever */}
object-fit: cover;
}
Or adding it as a background image and using "background-size: cover", as preposed by Oliver.
Another possibility would be to add them as background images and using media queries to load different images. This would allow you to load images that better fit the screen size and pixel density (art direction), and you'd get better quality in exchange for the extra work. For example:
#media (min-width: 35rem) and (min-resolution: 192dpi) {
.banner {
background-image: url('foo.bar');
}
}
Personally, I think media queries are great when you need them. If you can do the job with relative units, you avoid spreading around bits of the css that would be more maintainable together.
Now I must say the cool kids use another trick: responsive images. The examples below are from the MDN article. In you html you can add different sources for an image via "scrset" and "sizes" attributes:
<img srcset="elva-fairy-480w.jpg 480w,
elva-fairy-800w.jpg 800w"
sizes="(max-width: 600px) 480px,
800px"
src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">
In that case, the sizes attribute acts something like a media query to help the browser detect and ask for the best fit image.
Alternatively, you can use the <picture> tag with different sources, allowing you to use the media that best fit the user device. For example:
<picture>
<source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg">
<source media="(min-width: 800px)" srcset="elva-800w.jpg">
<img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva">
</picture>
These responsive image techniques exist because images in html are preloaded before your css, media queries and background images urls can kick in, so they basically load faster. It is a valid point, though, that transfering responsabilities from CSS to HTML because of performance issues goes against separation of concerns, but I'll let you be the judge on that.
And finally, about "vh" not working... it most certainly does. But we won't be able to help without a better description of the problem.
(I'm just learning CSS, so please don't yell at me >.> ... )
I have a rather big HD video that I wanted to put in the background.
The way I had it set up at first was
#video-background {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -1000;
background-size: cover;}
html:
<video preload="auto" autoplay loop="loop" id="video-background" muted="muted">
<source src="bg3.mp4" type="video/mp4">
<script>
document.getElementById('video-background').playbackRate=0.4;
</script>
</video>
I tried various methods to bring it down, like change background-size to contain, adding object-fit: cover, some other solutions I found on SO ...
Then I changed min to max for width and height (i dunno why i didn't do that in the first place, it totally makes sense...)
So now the video does fit within the screen, but because of aspect ratio, I have empty space on the side.
Is there any way to fit the video so that it matches either height or width of the screen, and then goes off screen however much it needs to to maintain its aspect ratio? In other words, how do I minimize the size of the video while still having it cover the whole screen (even if some parts get cut off)?
I've decided that for now, the easiest way is to just set max-width to 100% :| and remove any reference to height ... but I'm not sure if the ratio of width to height for any standard resolution is greater than that of the video. But this should work as long as that's true.
Edit: I can see that my temp solution isn't that great for when you scale the page itself %\ ... like if you're doing a split screen. Then the video stays at full width, but now there are gaps on top and bottom >.< ..... gruuuuunt
I have an html5 video element that is sized with css to cover the entire screen.
video#myVideo {
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
background-size: cover;
}
I have the poster attribute set to an image that I want to be a smaller size (e.g. 100px by 100px).
Is there a way to access and set the poster css, e.g. video#myVideo[poster]? Or any ideas how I can change my css to both cover the screen for the video and only render a smaller poster image?
Updated explanation:
The goal is to have the video cover the entire screen when there is a source and the poster image (or another separate image) only cover a smaller section (i.e. not stretched to 100%).
My current attempt is to not use the poster attribute and instead do:
<div>
<img ... />
<video ... />
</div>
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.
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 */
}