[html] bild skalieren

**red.iceman** · 23-07-2003, 10:31

Hallo zusammen,

ich habe folgendes Problem: Ich probiere mich gerade an html aus und möchte, daß sich die Seitenbreite der breite des Browserfensters anpaßt. Das geht soweit mit width="xx%" ganz gut, nur gerade Bilder würde ich gerne nur in einem gewissen Bereich skalieren lassen, also z.B. soll das Bild eine Breite von 90% haben, aber mindestens 400px und höchstens 700px breit.
Wie mach ich sowas??

ri

**pitu** · 23-07-2003, 10:36

mit css: max-width und max-height, allerdings koennen das noch nicht alle Browser.

gruss,
pitu

**red.iceman** · 23-07-2003, 11:20

Danke - sowas hab ich gesucht.
Leider scheint es erst ab Netscape 6 und IE 6 zu funktionieren - gibt es noch eine andere Möglichkeit? Eine Art "workaround" oder eine Lösung in css1 bzw. html?

ri

**pitu** · 23-07-2003, 15:22

http://selfhtml.teamone.de/css/eigen....htm#min_width

gruss,
pitu

**Jana** · 23-07-2003, 19:23

Schau mal bei http://www.cross-browser.com vorbei.

Mit folgendem Code kannst du jede Box "lay1" beliebig festlegen:

Code:

var lay1;
function windowOnload() {
 with (lay1 = cbeGetElementById('lay1').cbe) {
         resizeTo(document.cbe.width()/3,document.cbe.height()-100);   //*****Größe
         moveTo(document.cbe.width()/3+300,50);                                   //****Position
         show();   }

Ein Code zu Image resize

Code:

<html >
<head>
<style type='text/css'><!--
html { margin:0; padding:0; }
body {
  color:#000;
  background:#fff;
  margin:0; padding:0;
  font-family:verdana,arial,sans-serif; font-size:12px;
}
.clsCBE {
  position:absolute; visibility:hidden;
  color:#000000; background:#ffffff;
  margin:0; padding:0;
}
--></style>
<script type='text/javascript' src='../cbe/cbe_core.js'></script>
<script type='text/javascript'><!--
function windowOnload() {
  with (cbeGetElementById('id1').cbe) {
    background('#ffffff');
    moveTo('center');
    show();
  }
}
function doSubmit() {
  var w = document.forms['f1'].w.value;
  var h = document.forms['f1'].h.value;
  var u = document.forms['f1'].u.value;
  var e = cbeGetElementById('id1').cbe;
  e.innerHtml("<img src='"+u+"' width='"+w+"' height='"+h+"'>");
  return false;
}
//--></script>
</head>
<body>

<form name='f1' onsubmit='return doSubmit()'>
<table>
  <tr><td>img Width</td><td><input type='text' name='w' value='75'></td></tr>
  <tr><td>img Height</td><td><input type='text' name='h' value='40'></td></tr>
  <tr><td>img URL</td><td><input type='text' name='u' size='60' value='flag.gif'></td></tr>
  <tr><td colspan='2' align='center'><input type='submit' value='Change Image'></td></tr>
</table>  
</form>

<div id='id1' class='clsCBE'>id1</div>

</body>
</html>

Or this one

Code:

<html> 
<head> 
<title>Dynamic Image Resize</title> 
<style type='text/css'><!-- 
.clsCBE { 
  position:absolute; visibility:hidden; 
  width:100%; height:100%; clip:rect(0,100%,100%,0); 
  color:#000000; margin:0px; padding:0px; 
} 
--></style> 
******** type='text/javascript' src='cbe_core.js'> </script> 
******** type='text/javascript' src='cbe_clip.js'> </script> 
******** type='text/javascript' src='cbe_slide.js'> </script> 
******** type='text/javascript' src='cbe_slide2.js'> </script> 
******** type='text/javascript' src='cbe_event.js'> </script> 
******** type='text/javascript' src='cbe_util.js'> </script> 
******** type='text/javascript' src='cbe_debug.js'> </script> 

******** type='text/javascript'><!-- 
var e1,ee,innen; 

function windowOnload() { 
with (ee = cbeGetElementById('ee').cbe) {    
    resizeTo(800,300); 
    moveTo(100,50); 
    show(); 
    zIndex(2);      
}
  with (e1 = cbeGetElementById('e1').cbe) {    
    background('0000FF');   
    resizeTo(500,500); 
    moveTo(0,0); 
    show(); 
    zIndex(20); 
  } 

 document.cbe.addEventListener("mousemove", resizeImage); 
} 

function resizeImage(e){ 
e1 = cbeGetElementById('e1').cbe
e1.resizeTo(e.pageY,e.pageY); 
e1.slideTo(e.pageX,0,4000); 


pic1=document.images.myImage1;
pic1.width = e1.width()/4+20; 
pic1.height = e1.height()/4+20; 
} 
//--></script> 
</head> 

<body marginwidth='0' marginheight='0'> 

<div id='ee' class='clsCBE'>
<div id='e1' class='clsCBE'>
<img name="myImage1" src="bus.jpg" width="100" height="100"  border="0">
</div> 
</div> 


</body> 
</html>

**red.iceman** · 24-07-2003, 09:33

@pitu: Da steht doch auch bloß, dass es ab Netscape6 bzw IE6 funktioniert. Oder habe ich was überlesen???

@jana: Ups. Ich haett' nicht gedacht, dass das so kompliziert werden kann. Danke.

ri

**pitu** · 24-07-2003, 10:01

Das sollte auch noch dir Antwort zu workarounds etc. sein

gruss,
pitu

Thema: [html] bild skalieren

Themen-Optionen

Thema bewerten

Anzeige

[html] bild skalieren

Lesezeichen

Lesezeichen

Berechtigungen