In the code below, I set the max-width of the 1st image to be min(40px, 10%), but apparently it doesn't work. Firefox says “Invalid property value”. Why is that?
img#test1
{
max-width: min(40px, 10%);
}
img#test2
{
max-width: 10%;
}
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
</head>
<body>
<div>
<img id="test1" src="https://i.imgur.com/JfmBtYb.png" />
</div>
<div>
<img id="test2" src="https://i.imgur.com/JfmBtYb.png" />
</div>
</body>
</html>
Your problem has to do with browser compatibility for min(). It's not yet widely adopted, even the https://developer.mozilla.org/en-US/docs/Web/CSS/min DOC shows that compatibility is unknown for many browsers.
Related
So I've got a simple little domain up with a fileserver.
I want the main page just to be an image.
I also want that image to take up half of the browser window's height, so I write up a bit of html with in-line styling. Yes, I am a beginner at this stuff, so all I know for now is basic html and css.
<img src="fruit.png" alt="a bowl of fruit" style="max-width:auto;max-height:50%;">
I try it out and the image happily displays at full resolution, completely ignoring my styling, so I play with it a little and I eventually find out that something like
<img src="fruit.png" alt="a bowl of fruit" style="max-width:auto;max-height:500px;">
and
<img src="fruit.png" alt="a bowl of fruit" style="width:50%;">
work just fine, but the reason I use a percentage is because I want the size to scale according to the browser window size.
So I'm trying to figure out what I'm doing wrong here, or if there's some bug or I'm just being an idiot and the fix is painfully obvious.
The img has to have an absolute position! Otherwise a max-height doesn’t do anything.
Furthermore the value "auto" isn’t allowed.
<style>
img {
position: absolute;
max-height: 50%;
}
</style>
<img src="fruit.png" alt="a bowl of fruit"/>
or
<img src="fruit.png" alt="a bowl of fruit" style="position: absolute; max-height: 50%;"/>
First of all, you should use CSS in a linked file and not inline, like you do right now. This makes managing changes incredibly easier. Take a look at this minimal example:
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<link href="style.css" rel="stylesheet">
</head>
<body>
<img src="fruit.png" alt="a bowl of fruit">
</body>
</html>
The style.css file would contain all your styles, like:
img {
max-width: auto;
max-height: 500px;
}
An alternative for small pages is writing the CSS within the <style> tags, like so:
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<style>
img {
max-width: auto;
max-height: 500px;
}
</style>
</head>
<body>
<img src="fruit.png" alt="a bowl of fruit">
</body>
</html>
Even better, use classes:
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<style>
.image {
max-width: auto;
max-height: 500px;
}
</style>
</head>
<body>
<img class="image" src="fruit.png" alt="a bowl of fruit">
</body>
</html>
Regarding your question, I assume what you want is dynamically fill the half of the browser window with an image. This is possible with a rather new unit called viewport height (vh). Example:
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<style>
.half-viewport {
height: 50vh;
width: auto;
}
</style>
</head>
<body>
<img class="half-viewport" src="http://lorempixel.com/1280/800/" alt="image">
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>TMNT - Rancid Tomatoes</title>
<link rel="stylesheet" href="movie.css">
<meta charset="utf-8" />
</head>
<body>
<div class="fit">
<img src="images/rancidbanner.png" alt="Rancid Tomatoes">
</div>
</body>
</html>
so far i have succeeded with
img{
width: 100%;
}
but i want to it make it so only this image fits and not the other ones.
i tried doing it with
img.fit
on my css file, but this just returns it back to normal.
.fit img{
width: 100%;
}
should do it for you. The div's class name is fit, not the image's. Therefore img.fit won't work.
If your image had the class .fit then you could just do
.fit {
width: 100%:
}
If you remove class="fit" from div and add it to img then the effect will be the same for this image as you had for all images before.
You can Go little easier!
Just add width="100%" in <img> tag.
<!DOCTYPE html>
<html>
<head>
<title>TMNT - Rancid Tomatoes</title>
<meta charset="utf-8" />
</head>
<body>
<div class="fit">
<img width="100%" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcR8g4PCYI2ssAVPKlJmC9q4T_k84PE7zOHqAWultSDb-BbSy5YfK-5P0I1f" alt="Rancid Tomatoes" >
</div>
</body>
</html>
I'm working on a website and my website has to work in Chrome and in Internet Explorer 9. I'm almost finished and I have only one problem left. If i want to load an image with "content: url()" it works perfectly in Chrome but not in IE9. Can somebody please give me another solution where I where i don't have to change my HTML.
My HTML:
<!DOCTYPE html>
<html lang="nl">
<head>
<title>Test</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="test.css" />
</head>
<body>
<header>
</header>
<a id="photo">Photo</a>
<footer>
</footer>
</body>
</html>
My css:
#photo {
content: url('right-button.png');
}
Try this:
#photo {
background: url("right-button.png") no-repeat;
}
For more informations read here some articles i found for content attribute:
content property,W3c
I have uploaded the following simple HTML code to http://losthobbit.net/temp/anchor.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Anchor Test</title>
</head>
<body>
<div style="width:100%;height:100%">
<input maxlength="250" type="text" name="Text2" id="Text2" style="position: absolute;
top: 13px; left: 265px; right: 15px; height: 20px; text-align: Left">
</div>
</body>
</html>
As you can see, I've specified the left and right, but not the width, in order to get it to stretch.
In Chrome it stretches as one resizes the browser, but this does not work in IE8 or FireFox. Any ideas about how I can fix this?
Thank you
Please note that people are suggesting I use a width percentage... unfortunately it doesn't solve my problem. I want the exact same behaviour that I have in Chrome, which is that of a left and right anchor. This means that the stretching is not a fixed percentage.
Give the <input> a parent element, set your current styles on that and give the <input> element width:100%.
<div style="width:100%;height:100%">
<span style="position: absolute; top: 13px; left: 265px; right: 15px; height: 20px; text-align: Left">
<input maxlength="250" type="text" name="Text2" id="Text2" style="width:100%; height:100%;">
</span>
</div>
Working demo: http://jsbin.com/ayiwa5
You have to specify the percentage width explicitly on the <input type="text" /> for IE and firefox.
See this jsfiddle: http://jsfiddle.net/LKnJT/2/
It is quite quirky with the absolute positioning but it will make the textbox resize with the browser window.
Note: if you remove the style="width:100%;height:100%" from the div it will still resize in Chrome.
[Update]
Try this one: http://jsfiddle.net/LKnJT/5/. Tested in chrome and IE. It keeps the textbox between the left and right specifications.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Anchor Test</title>
</head>
<body>
<div style="position:absolute;left:150px;right:20px;">
<input maxlength="250" type="text" name="Text2" id="Text2" style="text-align:left;width:100%">
</div>
</body>
</html>
How much do you want it to stretch? You can specify width but set its value in terms of percentage:
width: 40%;
UPDATE:
Apply this to the input:
float: right;
width: 80%;
Just make sure to clear float on the parent container.
When the following is rendered, the height parameter of image (img) isn't considered. However, if I vary the width in terms of % for example 80%, it resizes and aspect ratio is intact. If I mention height in terms of px it works. Problems occur only for height being in % and in all browsers.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<img src="image.jpg" alt="Image" border="0" height="15%" width="100%" />
</body>
</html>
If we remove "http://www.w3.org/TR/html4/loose.dtd" from doctype as shown below, % works for height but any padding given to image won't be considered in IE but works fine in rest of browsers.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<img src="image.jpg" alt="Image" border="0" height="15%" width="100%" />
</body>
</html>
I have tried using YUI 3 api for CSS Reset. While it removes all default padding of browsers, it wont solve my problem. Any workaround available ?
Thanks.
Adding the following CSS to my CSS file did the trick.
html, body {
height: 100%;
margin: 0;
padding: 0;
}
Thanks me :D