English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Dieses Beispiel zeigt die Methode zur Steuerung der Bildgröße durch JS. Hier ist eine gemeinsame Referenz:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Neueste javascript-basierte Anpassung der Bildgröße pro Verhältnis, Anpassung der Bildgröße pro Verhältnis zum Anzeigen</title>
<script type="text/javascript">
function AutoResizeImage(maxWidth,maxHeight,objImg){
var img = new Image();
img.src = objImg.src;
var hRatio;
var wRatio;
var Ratio = 1}
var w = img.width;
var h = img.height;
wVerhältnis = maxWidth / w;
hVerhältnis = maxHeight / h;
if (maxWidth ==0 && maxHeight==0){
Verhältnis = 1}
if (hVerhältnis<//
) Verhältnis = hVerhältnis;1}else if (maxHeight==0){
if (wVerhältnis<
) Verhältnis = wVerhältnis;1else if (wVerhältnis<
}1 || hVerhältnis<1{
Verhältnis = (wVerhältnis<=hVerhältnis?wVerhältnis:hVerhältnis);
}
if (Verhältnis<1{
w = w * Verhältnis;
h = h * Verhältnis;
}
objImg.height = h;
objImg.width = w;
}
</<script>
</<head>
<body>
<br />
Originalgröße anzeigen (534 X 800)<br />
onload="AutoResizeImage(0,0,this)<br />
<a href="//img.jbzj.com/file_images/article/201702/2017218121607044.jpg" target="_blank"><img src="https://img.jbzj.com/file_images/article/201702/2017218121607044.jpg" border="0" width="0" height="0" onload="AutoResizeImage(0,0,this)" alt=""/></a><br/><br />
1.Verhältnismäßige Komprimierung nach Breite250 Komprimierung, Höhe nicht begrenzen Verhältnismäßige Komprimierung />
onload="AutoResizeImage(250,0,this)"<br />
<a href="/" target="_blank"><img src="https://img.jbzj.com/file_images/article/201702/2017218121607044.jpg" border="0" width="0" height="0" onload="AutoResizeImage(250,0,this)" alt=""1#]"/></a><br /><br />
2.Verhältnismäßige Komprimierung nach Höhe250 Komprimierung, Breite nicht begrenzen Verhältnismäßige Komprimierung />
onload="AutoResizeImage(0,250,this)"<br />
<a href="/" target="_blank"><img src="https://img.jbzj.com/file_images/article/201702/2017218121607044.jpg" border="0" width="0" height="0" onload="AutoResizeImage(0,250,this)" alt="[#2#]"/></a><br /><br />
3.Verhältnismäßige Komprimierung nach Höhe250 Breite250 Verhältnismäßige Komprimierung />
onload="AutoResizeImage(250,250,this)"<br />
<a href="/" target="_blank"><img src="https://img.jbzj.com/file_images/article/201702/2017218121607044.jpg" border="0" width="0" height="0" onload="AutoResizeImage(250,250,this)" alt="[#3#]"/></a><br /><br />
4.Verhältnismäßige Komprimierung von Höhe und Breite (400 X 512) />
onload="AutoResizeImage(400,512,this)"<br />
<a href="/" target="_blank"><img src="https://img.jbzj.com/file_images/article/201702/2017218121607044.jpg" border="0" width="0" height="0" onload="AutoResizeImage(400,512,this)" alt="[#4#]"/></a><br /><br />
5.Verhältnismäßige Komprimierung von Höhe und Breite (300 X 600), dann bleibt die Breite unverändert und wird automatisch proportional komprimiert. />
onload="AutoResizeImage(300,600,this)"<br />
<a href="/" target="_blank"><img src="https://img.jbzj.com/file_images/article/201702/2017218121607044.jpg" border="0" width="0" height="0" onload="AutoResizeImage(300,600,this)" alt="[#5#]"/></a><br /><br />
6.Falls die ursprüngliche Höhe und Breite des Bildes kleiner sind als die maximale Höhe und Breite der Komprimierung, wird das Bild nicht vergrößert angezeigt (Originalgröße) />
Originalbild444 x 207,komprimiert zu 500 x 600,bleibt das Originalbild angezeigt<br />
onload="AutoResizeImage(500,600,this)"<br />
<a href="/" target="_blank"><img src="https://img.jbzj.com/file_images/article/201702/2017218122006996.jpg" border="0" width="0" height="0" onload="AutoResizeImage(500,600,this)" alt="[#6#]"/></a><br /><br />
</body>
</html>
Das Ausführungsresultat ist wie folgt:
Interessierte Leser, die mehr über JavaScript erfahren möchten, können die Themen auf dieser Website lesen: 'Vollständiges Handbuch für JavaScript-Bildoperationen', 'Zusammenfassung von JavaScript-Wechsel- und Tricks', 'Zusammenfassung von JavaScript-Grafikzeichnungstricks', 'Zusammenfassung von JavaScript-Suchalgorithmen-Tricks', 'Zusammenfassung von JavaScript-Fehler- und Debugging-Tricks', 'Zusammenfassung von JavaScript-Datenstrukturen und Algorithmen-Tricks', 'Zusammenfassung von JavaScript-Abfragealgorithmen und Tricks' und 'Zusammenfassung von JavaScript-Mathematik-Bedienermethoden'.
Hoffentlich hat dieser Artikel zu Ihrer JavaScript-Programmgestaltung beigetragen.
Erklärung: Dieser Artikel wurde aus dem Internet übernommen und gehört dem Urheberrechtlichem Inhaber. Der Inhalt wurde von Internetnutzern freiwillig beigesteuert und hochgeladen. Diese Website besitzt keine Eigentumsrechte und hat den Inhalt nicht manuell bearbeitet. Sie übernimmt auch keine rechtlichen Verantwortlichkeiten. Wenn Sie verdächtige Inhalte entdecken, senden Sie bitte eine E-Mail an: notice#w3Erklärung: Der Inhalt dieses Artikels wurde aus dem Internet entnommen und gehört dem Urheberrechtlichem Inhaber. Der Inhalt wurde von Internetnutzern freiwillig beigesteuert und hochgeladen. Diese Website besitzt keine Eigentumsrechte und hat den Inhalt nicht manuell bearbeitet. Sie übernimmt auch keine rechtlichen Verantwortlichkeiten. Wenn Sie verdächtige Inhalte entdecken, senden Sie bitte eine E-Mail an: notice#w