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
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 have a problem with css and responsiveness i think my website is responsive enough, but the only thing make me confused is the img on my slider.
here is my website : www.spc.id
the img on slider is not responsive i think, because it does not friendly on mobile screen.
i have tried with media queries for resize the width and height:
<style>
#media only screen and (max-width: 639px) and (min-width: 480px){
#home-hero{
width: 480px;
height: auto;
padding:90px;
}
}
</style>
i can customize the height , but why i cannot custom the width ?
Thanks if you do not mind to helping me!
Hard to say without more information, but I notice a couple of things in the source code of your site.
1) Your media query is syntactically correct, but its not clear why you have a min-width rule on it. Unless you have another media query for screens smaller than 480px in width, you should eliminate the min-width rule. Try this code:
#media only screen and (max-width: 639px){
#home-hero{
width: 480px;
height: auto;
padding:90px;
}
}
You can play around with this jsfiddle which should hopefully clarify what I mean. https://jsfiddle.net/8nzatewL/
2) Looks like you're using bootstrap, but you have a typo in your class name. Change:
<div class='contai ner'>
to:
<div class='container'>
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 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.
http://library.skybundle.com/
I need the two big icons to be horizontally side by side until the window is resized to be smaller (like that of a mobile phone, for example), and then when that happens, the orange one on the right should drop down below the green one to form a vertical layout.
I know I should use media queries, as I have been told, but I am not sure how to do this or which ones to use.
I am not great at CSS, but I am learning. I have done TONS of research, spent weeks trying to figure this out. Please help. Thanks!
Make sure this is below your other rule for .skone-half.
This should work
#media(max-width: 960px) {
.skone-half {
width: 100%;
}
}
Just comment if it doesn't.
Here's a really simplified version of that portion of your site in a fiddle.
DEMO
So according to that fiddle you can tell the code works. If you have problems implementing it let me know or if it just doesn't work for some other reason. You could also adjust the point in px it changes at if you want I just set it to when it breaks the width of the container.
EDIT:
Usually though you would want to change the width of the containing element from a fixed width to 100%, this way the images center, like this.
DEMO
In your case you have two containers with widths that you need to change so it would look like this.
#media(max-width: 960px) {
.skone-half {
width: 100%;
}
#container, #head-content {
width: 100%;
}
}
Add this to your css file:
/*if the screen is 800 pixels or less */
#media only screen and (min-width: 800px) {
.page {width: 100%; } /*set your page class to be 100% width */
}
Here's a starting point for your jsfiddle (which exihibits the side-by-side -> vertical layout!).
http://jsfiddle.net/gjGGw/1/
HTML
<img src="http://library.skybundle.com/wp-content/uploads/2013/10/PRODUCT_TRAINING2.png" />
<img src="http://library.skybundle.com/wp-content/uploads/2013/10/EDUCATIONAL_COURSES2.png" />
CSS
img{width:300px;height:300px;margin:0px 30px;}