I have an image that is about 400px by 300px in size.
I have resized it using css like so:
img {
display: block;
max-width: 50px;
max-height: 50px;
}
But when it displays it flickers constantly.
This only happens in Firefox. Chrome, IE and Safari all display fine. Why is this?
First of all its a bad idea to resize the image. When you need a 50x50 image why have a 400x300 image. You waste the users band-with by letting him download a 30Kb file when he can do it with 4Kb.
However, what you want is to scale the image.
CSS3 has new property called ri .
try this
img.ri { max-width: 90%; }
You can use media queries along with this.
#media screen and (orientation: portrait) {
img.ri { max-width: 90% }
}
#media screen and (orientation: landscape) {
img.ri { max-height: 90% }
}
Now you don't want to loose your aspect ratio, so try the css property
resize: none|both|horizontal|vertical|initial|inherit; /* any one of the options IE not supported*/
Look into this : http://demosthenes.info/blog/586/CSS-Fluid-Image-Techniques-for-Responsive-Site-Design if you want to responsively scale images.
Related
i'm new to html and css and i've been having a few issues dealing with media queries.
Basically, i have a website that only "actually works" when its been visualizated in a 1920x1080 resolution, so i created a few media queries on my css to support other resolutions as well. I'm having a little bit of trouble on making a media querie to support the 1280x1024px resolution. When the browser is not on fullscreen, on windowed mod, none of my changes written in the css are applied. But when i go fullscreen, everything works just fine.
Also, i cant set 1280 width for this cuz it'll mess up my other media querie which was created for the 1280x768 resolution
Can anybody help me with this please?
Appreciate it.
This is how it looks on windowed mode, with none of my changes written in the CSS applied
This is how it looks on fullscreen, now, its actually doing what it's supposed to do
#media screen and (height:1024px) {
.white_round_background{
margin-left: 320px;
height: 170vh;
width: 160vw;
background-color: rgb(197, 183, 183);
}
.menunav {
left: 38%;
top: 4%;
}
.system_selection {
margin: 420px 0 0 0px;
height: 95px;
}
#logo_sliding_menu {
margin-top: 710px;
}
}
Hum... Just a guess at this point, but pay attention to that: the sequential order of css code matters.
You can have a lot of media-queries definitions, but they have to be in a specific order (from the highest to lowest). EG:
#media only screen and (max-heigth: 600px) {}
and only then
#media only screen and (max-width: 500px){}
ALSO, instead of just a specific height, maybe try to use the max-height property (which will be applied to devices having a resolution small than that height. Because aiming just one height of 1024px will not work on windows being 1023px height or less or 1025 or more...
.yourClass {
/* CSS applied to all devices above 1024px height */
}
#media only screen and (max-width: 1024px){
.yourClass {
/* CSS applied to all devices smaller than 1024px height */
}
}
#media only screen and (max-width: 955px){
.yourClass {
/* CSS applied to all devices smaller than 955px height */
}
}
#media only screen and (max-width: 500px){
.yourClass {
/* CSS applied to all devices smaller than 500px height */
}
}
/* And so on */
You can also play with min-height and max-height in the same query :
#media screen and (min-height: 400px) and (max-height: 900px)
{
.yourClass {
/* CSS applied to all devices
no less than 400px height and no more than 900px height */
}
}
I have a web project, how do I make the images on my website responsive in any display? Will this is my code is produce an error?
html code
<img src="image/Al-Khawarizmi.jpeg" class="img-load">
css code
#media screen and (max-width: 750px) {
.img-load {
width: 100%;
height: auto;
}
}
You have a few options when it comes to making your image responsive.
With the current settings you have of width: 100% and height: auto, your image is already responsive without the media query.
Your image is not longer responsive if you start using px as a unit of measure for your height and width.
You do haven't need to #media, if you want image width to cover the entire page width, in any device. only:
HTML:
<img src="image/Al-Khawarizmi.jpeg" class="img-load">
CSS:
.img-load{
width:100%;
}
You must use #media, only when you want your image to have different widths in any device.
For example, if you want the width of an image to be 50% on the large screen, and 100% on the smaller screen, you can set:
CSS:
.img-load{
height: auto;
}
#media screen and (max-width: 750px) {
.img-load{
width:100%;
}
}
#media screen and (max-width: 1200px) {
.img-load{
width:50%;
}
}
I understand there's a gazillion questions on this issue but none of the solutions on any of them seem to work for me. This is what my markup looks like:
<div class="immersion-div">
<div class="immersion-div-image"></div>
</div>
As you see, it's a fairly straightforward setup with one div containing another. The parent div is styled to adapt its height to the device screen resolution using media queries. Here's how the two divs are styled:
Parent div:
#media (min-width: 2000px) { .immersion-div { height: 1307px; } }
#media (max-width: 1999px) and (min-width: 1401px) { .immersion-div { height: 1000px; } }
#media (max-width: 1400px) and (min-width: 750px) { .immersion-div { height: 500px; } }
#media (max-width: 749px) and (min-width: 300px) { .immersion-div { height: 300px; } }
#media (max-width: 299px) { .immersion-div { height: 136px; } }
Child div (with the image background):
.immersion-div-image {
background: url(../../bootstrap/img/homepage/spanish_immersion.jpg) no-repeat center center;
background-size: cover;
height: 100%;
}
The image serving as the background is 2880px by 900px (although that should be inconsequential in this scenario) and the resolution of the screen on which I tested this is 1366px wide. Per the defined media queries, the height of parent div should evaluate to 500px since the screen falls in the 750px-1400px category. However, on Internet Explorer, the div seems to render with a height of 1000px! This issue is only affecting IE whereas all other browsers are rendering the divs fine. What could be the problem? Before anyone suggests using background-size: contain, I must admit I tried it and it messes up the aspect ratio leaving a blank band at the bottom of the div which is why I don't want to go that route. Besides, I want to understand why cover wouldn't work on IE when it does just fine on all other browsers.
Just in case it helps, the site in question is peppyburro.com and the affected divs are on the last green image on the home page.
I give my div elements sizes in % because I want them to be able to adapt to different screen sizes of different devices. I however want the size to be constant for a device. For example if a div is 60% in width of my laptop browser screen it should stay 60% even when I minimize size of my browser window.
How do I achieve this?
You are probally looking for
min-width: 800px;
If the width gets under 800px now the div wont resize smaller and just stay at this width.
Just make sure you add a media query like this:
div{
width: 60%;
}
#media (min-width: 601px) {
div{
min-width: 800px;
}
}
#media (max-width: 600px) {
div{
min-width: 400px;
}
}
Using % you can make the div adaptive, but inside side the div if there any image or fixed width elements it will not be adaptive, you need to make them adaptive using media queries
ex:
/* Small Mobile Devices ( < 768px ) Style Begin */
#media (min-width: 0px) and (max-width: 767px) {
.div-elements-name {
width:100%;
}
}
I recently saw a link, on twitter, to path's new website; with.me. There's some pretty simple but neat things occurring on a with.me page, for example look at this one of Ashton Kutcher:
http://with.me/w/2275
My favorite thing on that page is how the picture appears to snap to a minimum and maximum size. When you resize the browse, you will notice that the image will eventually shrink to a smaller size in a "snapping" fashion. It doesn't resize with the browser, it instantly goes to the smaller size if the bigger one can't fit in the browser window.
How are they doing this? I've been poking around the CSS for the past two hours. I have a test page of my own that I've been trying to get this to work on, but can't figure it out.
Any ideas?
#ryan; it's a css3 media query .
if the check the link source then you saw he you it in there css
#media screen and (max-height: 720px), screen and (max-width: 850px) {
#page.permalink {
height: 454px;
margin: -247px auto 0 auto;
}
#page-container {
width: 650px;
}
#photo-container {
margin-left:-370px;
}
#photo {
height: 454px;
width: 340px;
background-size: 340px 454px;
}
}
check this
http://css-tricks.com/css-media-queries/
It's done by applying different stylesheets based on screen size:
#media screen and (min-height: 1000px) {
If you're using a webkit-based browser (safari / chrome), it actually animates between the two using a webkit animation.