English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
本文实例讲述了JS实现控制图片显示大小的方法。分享给大家供大家参考，具体如下：
<!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> 最新javascript自动按比例显示图片，按比例压缩图片显示 </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;
wRatio = maxWidth / w;
hRatio = maxHeight / h;
if (maxWidth ==0 && maxHeight==0){
Ratio = 1;
}else if (maxWidth==0){//
if (hRatio<1) Ratio = hRatio;
}else if (maxHeight==0){
if (wRatio<1) Ratio = wRatio;
}else if (wRatio<1 || hRatio<1){
Ratio = (wRatio<=hRatio?wRatio:hRatio);
}
if (Ratio<1){
w = w * Ratio;
h = h * Ratio;
}
objImg.height = h;
objImg.width = w;
}
</script>
</head>
<body>
<br />
Просмотр оригинального изображения (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="[#0#]"/></a><br/><br />
1. По ширине 250 сжать, не ограничивать высоту, сжать по пропорции<br />
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. По высоте 250 сжать, не ограничивать ширину, сжать по пропорции<br />
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. Компрессия по высоте 250 и ширине 250, пропорционально<br />
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. Компрессия по несоответствующим пропорциям высоты и ширины (400 X 512), в этом случае высота не изменяется, автоматически сжимается по пропорциям высоты.<br />
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. Компрессия по несоответствующим пропорциям высоты и ширины (300 X 600), в этом случае ширина не изменяется, автоматически сжимается по пропорциям ширины.<br />
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. Если оригинальная высота и ширина изображения меньше максимальной высоты и ширины сжатия, изображение не будет растягиваться (будет отображаться в оригинальном виде)<br />
Оригинальное изображение 444 x 207, сжатое до 500 x 600, будет сохранено в оригинальном виде<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>
Результат выполнения показан ниже:
Для тех, кто интересуется дополнительной информацией о JavaScript, мы рекомендуем ознакомиться с нашими статьями: «Полное руководство по операциям с изображениями JavaScript», «Суммарное руководство по эффектам и приемам JavaScript», «Суммарное руководство по рисованию графиков JavaScript», «Суммарное руководство по поисковым алгоритмам JavaScript», «Суммарное руководство по ошибкам и отладке JavaScript», «Суммарное руководство по структурам данных и алгоритмам JavaScript», «Суммарное руководство по алгоритмам遍ения и приемам JavaScript» и «Суммарное руководство по математическим операциям JavaScript».
Надеюсь, что это руководство поможет вам в разработке программ на JavaScript.
Заявление: содержимое этой статьи взято из Интернета, авторские права принадлежат соответствующему автору, содержимое предоставлено пользователями Интернета в добровольном порядке, сайт не обладает правами собственности, не做过人工编辑处理，не несет ответственности за соответствующие юридические последствия. Если вы обнаружите контент,涉嫌侵犯版权， пожалуйста, отправьте письмо по адресу: notice#oldtoolbag.com (во время отправки письма, пожалуйста, замените # на @) для сообщения о нарушении,并提供相关证据. При подтверждении факта нарушения, сайт немедленно удалят涉嫌侵权的内容。