Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

how to shrink pics wider than 80px but don't stretch pics smaller than 80px?

Posted on 2007-08-05
15
Medium Priority
?
305 Views
Last Modified: 2013-11-19
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.
0
Comment
Question by:mtnr
  • 6
  • 4
  • 4
  • +1
15 Comments
 
LVL 28

Expert Comment

by:TName
ID: 19633618
Hi8, you could try something like this:


<!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.getElementsByTagName('IMG');

   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>
0
 
LVL 30

Expert Comment

by:VirusMinus
ID: 19633628
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;border:1px solid #000}
      
</style>
</head>

<body>

<div class="imgHolder">
<img src="http://www.nblounge.com/images/foxres.png" onLoad="if(this.width>80){this.width=80;}"><br>
<img src="http://sfx-images.mozilla.org/affiliates/Buttons/firefox2/ff2o80x15.gif" onLoad="if(this.width>80){this.width=80;}"><br>
<img src="http://sfx-images.mozilla.org/affiliates/Buttons/firefox2/firefox-spread-btn-1.png" onLoad="if(this.width>80){this.width=80;}"><br>
<img src="http://sfx-images.mozilla.org/affiliates/Buttons/firefox2/firefox-spread-btn-2.png" onLoad="if(this.width>80){this.width=80;}">
</div>


</body>
</html>

0
 
LVL 28

Expert Comment

by:TName
ID: 19633633
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
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
LVL 30

Expert Comment

by:VirusMinus
ID: 19633639
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.
0
 
LVL 28

Expert Comment

by:TName
ID: 19633644
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.getElementById('picContainer');
   var imgs=cntn.getElementsByTagName('IMG');
   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>
0
 
LVL 28

Expert Comment

by:TName
ID: 19633649
>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...  :)
0
 
LVL 17

Expert Comment

by:mreuring
ID: 19635646
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)?
0
 
LVL 30

Expert Comment

by:VirusMinus
ID: 19635702
@mreuring: max-width would certainly work for browsers that understand it. but what filter would you use for ie6?
0
 
LVL 17

Expert Comment

by:mreuring
ID: 19636006
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.offsetWidth > 80)?"80px":"auto");
}

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.offsetWidth >= 80)?"80px":"auto");
}

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
0
 
LVL 17

Accepted Solution

by:
mreuring earned 1200 total points
ID: 19636012
Hmm, for safety, and to keep from bouncing of the wall, combine my expression idea with VirusMinus' onload function:

* html .gallery img {
  -ie-max-width: expression(this.onload=function(){if(this.width>80) this.width=80;});
}

Again, untested, but it might help another expert to get it running if so desired...
0
 
LVL 30

Assisted Solution

by:VirusMinus
VirusMinus earned 800 total points
ID: 19636081
fantastic, mreuring!

it works:

<!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;border:1px solid #000}
      .imgHolder img{max-width:78px;}
      * html .imgHolder img {
              -ie-max-width: expression(this.onload=function(){if(this.width>80) this.width=80;});
            }
</style>
</head>

<body>

<div class="imgHolder">
<img src="https://addons.mozilla.org/img/app-icons/firefox_small.png" ><br>
<img src="http://sfx-images.mozilla.org/affiliates/Buttons/firefox2/ff2o80x15.gif" ><br>
<img src="http://sfx-images.mozilla.org/affiliates/Buttons/firefox2/firefox-spread-btn-1.png" ><br>
<img src="http://sfx-images.mozilla.org/affiliates/Buttons/firefox2/firefox-spread-btn-2.png" >
</div>


</body>
</html>

mtnr, please award this question to mreuring :)
0
 
LVL 28

Expert Comment

by:TName
ID: 19637795
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?
 
0
 
LVL 17

Expert Comment

by:mreuring
ID: 19642102
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 :)
0
 

Author Comment

by:mtnr
ID: 19644286
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.
0
 
LVL 28

Expert Comment

by:TName
ID: 19645155
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;border:1px solid #000;}  
   #imgHolder img{max-width:78px;}
</style>
<script type="text/javascript">
<!--
function test(){
    if(!document.body.style.minWidth) {
       var cntn=document.getElementById('imgHolder');
       var imgs=cntn.getElementsByTagName('IMG');
       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.offsetWidth) ;
}
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...    
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

JavaScript has plenty of pieces of code people often just copy/paste from somewhere but never quite fully understand. Self-Executing functions are just one good example that I'll try to demystify here.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Suggested Courses

571 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question