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.
Related
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
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'>
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 */
}
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;}
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>