mtnr
asked on
how to shrink pics wider than 80px but don't stretch pics smaller than 80px?
When display the Imgs (gifs and jpgs) with no CSS, they are a variety of widths:
Some are 20px, some 60px, some 100px, some 120px, etc.
I need to set up the css so no pic is displayed wider than 80px;
But I do NOT want to stretch the ones that are smaller than 80px.
I ONLY want to shrink the ones that are wider than 80px.
In other words:
the 20px one would appear 20px wide
the 60px one would appear 60px wide
the 100px one would appear 80px wide
the 120px one would appear 80px wide
How to?
Thank you.
Some are 20px, some 60px, some 100px, some 120px, etc.
I need to set up the css so no pic is displayed wider than 80px;
But I do NOT want to stretch the ones that are smaller than 80px.
I ONLY want to shrink the ones that are wider than 80px.
In other words:
the 20px one would appear 20px wide
the 60px one would appear 60px wide
the 100px one would appear 80px wide
the 120px one would appear 80px wide
How to?
Thank you.
to do this you will need to know which images are less than 80px wide. and CSS or HTML aren't going to give you that information.
some javascript or server side ASP can get you that.
Here's and example with some javascript:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Untitled</title>
<style type="text/css">
.imgHolder{width:80px;bord
</style>
</head>
<body>
<div class="imgHolder">
<img src="http://www.nblounge.com/images/foxres.png" onLoad="if(this.width>80){
<img src="http://sfx-images.mozilla.org/affiliates/Buttons/firefox2/ff2o80x15.gif" onLoad="if(this.width>80){
<img src="http://sfx-images.mozilla.org/affiliates/Buttons/firefox2/firefox-spread-btn-1.png" onLoad="if(this.width>80){
<img src="http://sfx-images.mozilla.org/affiliates/Buttons/firefox2/firefox-spread-btn-2.png" onLoad="if(this.width>80){
</div>
</body>
</html>
some javascript or server side ASP can get you that.
Here's and example with some javascript:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Untitled</title>
<style type="text/css">
.imgHolder{width:80px;bord
</style>
</head>
<body>
<div class="imgHolder">
<img src="http://www.nblounge.com/images/foxres.png" onLoad="if(this.width>80){
<img src="http://sfx-images.mozilla.org/affiliates/Buttons/firefox2/ff2o80x15.gif" onLoad="if(this.width>80){
<img src="http://sfx-images.mozilla.org/affiliates/Buttons/firefox2/firefox-spread-btn-1.png" onLoad="if(this.width>80){
<img src="http://sfx-images.mozilla.org/affiliates/Buttons/firefox2/firefox-spread-btn-2.png" onLoad="if(this.width>80){
</div>
</body>
</html>
Sorry, forgot to mention it - I don't see a viable way of doing this with CSS either - hence the javascript...
Not even attribute selectors will work in this case - they only match exact values (and they're not yet cross-browser anyway):
http://www.w3.org/TR/REC-CSS2/selector.html#attribute-selectors
Not even attribute selectors will work in this case - they only match exact values (and they're not yet cross-browser anyway):
http://www.w3.org/TR/REC-CSS2/selector.html#attribute-selectors
TName's solution will resize all images in your document. If you want to do the images only inside of a particular container you will have to modify the code to get the image children inside a container.
Another version that will only resize images contained in side the div #picContainer, all other images will remain untouched:
(@VirusMinus: good idea to use links to "online images" of course :)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script>
function resizePics() {
var cntn=document.getElementBy
var imgs=cntn.getElementsByTag
for (var i=0; i<imgs.length;i++) {
if (imgs[i].offsetWidth > 80) imgs[i].style.width=80+'px
}
}
</script>
</head>
<body onLoad="resizePics()">
<div id="picContainer">
<img src="1.gif" >
<img src="1.jpg">
<img src="1.png" style="width="80px;">
<img src="4.gif">
<img src="5.gif">
</div>
<img src="1.gif" >
<img src="1.jpg">
<img src="1.png" style="width="80px;">
<img src="4.gif">
<img src="5.gif">
</body>
</html>
(@VirusMinus: good idea to use links to "online images" of course :)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script>
function resizePics() {
var cntn=document.getElementBy
var imgs=cntn.getElementsByTag
for (var i=0; i<imgs.length;i++) {
if (imgs[i].offsetWidth > 80) imgs[i].style.width=80+'px
}
}
</script>
</head>
<body onLoad="resizePics()">
<div id="picContainer">
<img src="1.gif" >
<img src="1.jpg">
<img src="1.png" style="width="80px;">
<img src="4.gif">
<img src="5.gif">
</div>
<img src="1.gif" >
<img src="1.jpg">
<img src="1.png" style="width="80px;">
<img src="4.gif">
<img src="5.gif">
</body>
</html>
>TName's solution will resize all images in your document. If you want to do the images only inside of a particular container you will have to modify the code to get the image children inside a container.
Yep, I was just doing it - btw, your solution made me think that it might be necessary to not resize them all... :)
Yep, I was just doing it - btw, your solution made me think that it might be necessary to not resize them all... :)
Uhm, why would you not use max-width:80px and then add a filter for IE6 (which is the only odd one out that doesn't understand min-wdth)?
@mreuring: max-width would certainly work for browsers that understand it. but what filter would you use for ie6?
Sorry, I used the wrong name, expression is what I meant. Somethin like this should work (untested, IE6 doesn't run on my mac :)):
.gallery img {
max-width: 80px;
width: expression((this.offsetWid
}
Since only IE understands expressions this would only work on IE and all other browsers ignore the invalid css expression. To exclude IE7 the * selector hack can be employed:
.gallery img {
max-width: 80px;
}
* html .gallery img {
width: expression((this.offsetWid
}
Again, I could not test the expression, but as far as I can tell it should work just fine. And it also helps sorting out your issues with only wanting to alter images in a specific portion of the website...
My two cents,
Martin
.gallery img {
max-width: 80px;
width: expression((this.offsetWid
}
Since only IE understands expressions this would only work on IE and all other browsers ignore the invalid css expression. To exclude IE7 the * selector hack can be employed:
.gallery img {
max-width: 80px;
}
* html .gallery img {
width: expression((this.offsetWid
}
Again, I could not test the expression, but as far as I can tell it should work just fine. And it also helps sorting out your issues with only wanting to alter images in a specific portion of the website...
My two cents,
Martin
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Sorry people, but I'm not sure I understand this, so please explain it to me slowly :)
This clever workaround will only work (in IE6) with javascript enabled. Why not simply use a pure js solution then? Why use a hack in the first place?
If the reason is that people with browsers that do understand "min-width" should be able to see the effect even with js disabled, then you could combine the min-width CSS (e.g. for FF) with the plain javascript (for all, including IE6), without any hacks.
Or am I missing something?
This clever workaround will only work (in IE6) with javascript enabled. Why not simply use a pure js solution then? Why use a hack in the first place?
If the reason is that people with browsers that do understand "min-width" should be able to see the effect even with js disabled, then you could combine the min-width CSS (e.g. for FF) with the plain javascript (for all, including IE6), without any hacks.
Or am I missing something?
CSS2.1 enabled browser should (and with the exception of the IE4/5/6 family they do) be able to understand min-width and max-width. That's a non-javascripted solution which would do exactly what we want, it would prevent images from displaying wider than 80px:
img { max-width: 80px }
There you go problem solved, except for the aforementioned IE browsers. To fix IE you can then proceed to write a JS solution or choose to use an expression.
So, according to my humble opinion the advantages of using an expression:
1. It specifically targets only the malfunctioning browser family (IE6 and before)
2. It doesn't require loading an extra external resource as it's part of your already linked css-file
3. It can target specific images with the accuracy of a css-selector (JS method would need additional scripting for this)
4. Browsers already capable of max-width won't be bothered with interpreting and running extra JS-code
I personally can't see the benefit of using a plain JS solution, but I repeat, it's my humble opinion and I'm not Bill Gates :)
img { max-width: 80px }
There you go problem solved, except for the aforementioned IE browsers. To fix IE you can then proceed to write a JS solution or choose to use an expression.
So, according to my humble opinion the advantages of using an expression:
1. It specifically targets only the malfunctioning browser family (IE6 and before)
2. It doesn't require loading an extra external resource as it's part of your already linked css-file
3. It can target specific images with the accuracy of a css-selector (JS method would need additional scripting for this)
4. Browsers already capable of max-width won't be bothered with interpreting and running extra JS-code
I personally can't see the benefit of using a plain JS solution, but I repeat, it's my humble opinion and I'm not Bill Gates :)
ASKER
amazing, I really wasn't sure it was possible! thank you mreuring (and VirusMinus for the elegant test html). And all other contributors for the interesting discussion. Nice work.
Ok, I guess it's a matter of taste, I would not use invalid CSS in a case like this (when there are other options) but it seems like I'm outnumbered here ;)
>1. It specifically targets only the malfunctioning browser family (IE6 and before)
Yes, but that is also a problem. Any browser that doesn't support min-width AND is not IE is left outside.
>2. It doesn't require loading an extra external resource as it's part of your already linked css-file
True, but usually there'll be a js section/file anyway.
>3. It can target specific images with the accuracy of a css-selector (JS method would need additional scripting for this)
True, js will need 3-4 lines for it. If that's an issue, ok. It wouldn't be an issue for me.
>4. Browsers already capable of max-width won't be bothered with interpreting and running extra JS-code
The most valid argument in my view, but there are ways around it. We could first test for min-width support for example, by giving the body a min-width (90% wom't hurt I'd guess) and testing for it:
<!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>Test</title>
<style type="text/css">
#imgHolder{width:80px;bord
#imgHolder img{max-width:78px;}
</style>
<script type="text/javascript">
<!--
function test(){
if(!document.body.style.mi
var cntn=document.getElementBy
var imgs=cntn.getElementsByTag
for (var i=0; i<imgs.length; i++) {
if (imgs[i].offsetWidth > 80) imgs[i].style.width=80+'px
}
alert('I don\'t support min-width. I had to use js instead... ');
}
//alert(document.body.offs
}
window.onload=test;
-->
</script>
</head>
<body style="min-width:90%;">
<div id="imgHolder">
<img src="https://addons.mozilla.org/img/app-icons/firefox_small.png" alt=""><br>
<img src="http://sfx-images.mozilla.org/affiliates/Buttons/firefox2/ff2o80x15.gif" alt=""><br>
<img src="http://sfx-images.mozilla.org/affiliates/Buttons/firefox2/firefox-spread-btn-1.png" alt=""><br>
<img src="http://sfx-images.mozilla.org/affiliates/Buttons/firefox2/firefox-spread-btn-2.png" alt="">
</div>
</body>
</html>
As I said, a matter of preference.
At least I'd put that expression inside a conditional comment...
>1. It specifically targets only the malfunctioning browser family (IE6 and before)
Yes, but that is also a problem. Any browser that doesn't support min-width AND is not IE is left outside.
>2. It doesn't require loading an extra external resource as it's part of your already linked css-file
True, but usually there'll be a js section/file anyway.
>3. It can target specific images with the accuracy of a css-selector (JS method would need additional scripting for this)
True, js will need 3-4 lines for it. If that's an issue, ok. It wouldn't be an issue for me.
>4. Browsers already capable of max-width won't be bothered with interpreting and running extra JS-code
The most valid argument in my view, but there are ways around it. We could first test for min-width support for example, by giving the body a min-width (90% wom't hurt I'd guess) and testing for it:
<!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>Test</title>
<style type="text/css">
#imgHolder{width:80px;bord
#imgHolder img{max-width:78px;}
</style>
<script type="text/javascript">
<!--
function test(){
if(!document.body.style.mi
var cntn=document.getElementBy
var imgs=cntn.getElementsByTag
for (var i=0; i<imgs.length; i++) {
if (imgs[i].offsetWidth > 80) imgs[i].style.width=80+'px
}
alert('I don\'t support min-width. I had to use js instead... ');
}
//alert(document.body.offs
}
window.onload=test;
-->
</script>
</head>
<body style="min-width:90%;">
<div id="imgHolder">
<img src="https://addons.mozilla.org/img/app-icons/firefox_small.png" alt=""><br>
<img src="http://sfx-images.mozilla.org/affiliates/Buttons/firefox2/ff2o80x15.gif" alt=""><br>
<img src="http://sfx-images.mozilla.org/affiliates/Buttons/firefox2/firefox-spread-btn-1.png" alt=""><br>
<img src="http://sfx-images.mozilla.org/affiliates/Buttons/firefox2/firefox-spread-btn-2.png" alt="">
</div>
</body>
</html>
As I said, a matter of preference.
At least I'd put that expression inside a conditional comment...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script>
function resizePics() {
var imgs=document.getElementsB
for (var i=0; i<imgs.length;i++) {
if (imgs[i].offsetWidth > 80) imgs[i].style.width=80+'px
}
}
</script>
</head>
<body onLoad="resizePics()">
<img src="1.gif">
<img src="2.gif">
<img src="3.gif">
<img src="4.gif">
<img src="5.gif">
</body>
</html>