按比例显示缩略图，防止变形

最新推荐文章于 2022-01-25 11:42:17 发布
最新推荐文章于 2022-01-25 11:42:17 发布
阅读量563 收藏
点赞数
分类专栏： .NET - 缩略图/水印 文章标签： javascript html action function div image
本文介绍了两种实现图片自适应浏览器窗口大小的技术方案。一种是通过JavaScript动态调整图片大小以适应指定区域，确保图片按比例缩放；另一种是利用图片自身的onload事件结合JavaScript设置最大宽度和高度，保持图片原始宽高比。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

 

<html>
<head>
<script language='javascript'>
function showImg1(smallWidth, smallHeight)
{
    document.all.image1.src = document.all.file1.value;
    
    var bigWidth = document.all.image1.width;
    var bigHeight = document.all.image1.height;
    var div1 = bigWidth/bigHeight;
    var div2 = bigHeight/bigWidth;

    var n1 = 0;
    var n2 = 0;
    if(bigWidth>smallWidth)
    {
        n1 = bigWidth/smallWidth;
    }
    else
    {
        smallWidth = bigWidth;
    }
    if(bigHeight>smallHeight)
    {
        n2 = bigHeight/smallHeight;
    }
    else
    {
        smallHeight = bigHeight;
    }
    if(n1!=0 || n2!=0)
    {
        if(n1>n2)
        {
            smallHeight = smallWidth*div2;
        }
        else
        {
            smallWidth = smallHeight*div1;
        }
    }

    document.all.image2.width = smallWidth;
    document.all.image2.height = smallHeight;
    document.all.image2.src = document.all.file1.value;
}
</script>
</head>
<body>

<div id="div1">
      <img id="image1">
</div>

<table border=1><tr><td width=100 height=100 align="center" valign="center">
    <img id="image2" align="center">
</td></tr></table>

<form method="post" action="?action=get" action="">
<input type="file" id="file1" onpropertychange="showImg1(100, 100);"><br/>
</form>

</body>
</html>



<html>
<head>
<script language='javascript'>

function setImgSize(obj, defaultWidth, defaultHeight)
{
    var width = obj.width;
    var height = obj.height;
    if(width>defaultWidth || height>defaultHeight)
    {
        if(width>height)
        {
            obj.style.width = defaultWidth;
        }
        else
        {
            obj.style.height = defaultHeight;
        }
    }
}

</script>
</head>
<body>

<img src="images/1.gif" border=0 onload="javascript:setImgSize(this, 100, 100)"><br/><br/>

</body>
</html>

 

解析dcm文件生成jpg上传七牛云，及按比例的缩略图
qq_17431609的博客
11-23 842
所需jar包： dcm4che-core-3.3.8.jar dcm4che-image-3.3.8.jar dcm4che-imageio-3.3.8.jar dcm4che-tool-dcm2jpg-3.3.8.jar ij.jar /** * 输入一个dicom文件的绝对路径和名字 * 获取一个jpg文件 */ public static void uploadByObs(Stri...
ASP固定比例裁剪缩略图的方法
10-23
ASP固定比例裁剪缩略图方法的关键在于，它不仅能保持图片的宽高比例不变，防止图片变形，还能根据图片与目标区域的宽高比关系，智能地裁剪图片多余的部分，确保图片能够充满整个展示区域，不留下空隙，从而达到美观...
按比例生成缩略图文件及显示缩略图
子网'Blog
10-09 1096
php        function CreateThumbnail($path,$newFileName,$width=100,$height=100)    {        @$s_img = getimagesize($path);        @$type  = $s_img[2];                switch($type)        {           
缩略图自适应 解决变形模糊问题
IT技术宅-北方的刀郎
03-21 2771
dede缩略图自适应 解决变形模糊问题 (2013-12-23 23:15:25) te>转载▼te> 标签： dede 缩略图 自适应 变形模糊 织梦 分类： dede织梦建站教程知识 dede的缩略图调用非常地不智能，如果容器与缩略图的尺寸不相符就很容易变形模糊，这个属于你自己对图片解决方案的控制问题，下面分享一个非常实用的css代码，也是淘宝里采用的解决方案！ 资料也是在
等比例缩放生成缩略图
weixin_30381793的博客
01-16 246
////// 等比例缩放生成缩略图////// 源图路径（物理路径）/// 缩略图宽度/// 缩略图高度（依缩略图宽度等比例计算所得）public void MakeThumbnail(String originalImagePath, Int32 width, Int32 height){//获取原始图片...
原图按比例缩略图
05-03
其次，“按比例缩略图”是指在创建缩略图时，保持原图的长宽比不变，避免拉伸或压缩图像，从而防止图片变形。这在图片展示一致性、美观性和专业性方面至关重要。为了实现这一目标，我们需要使用图像处理库或编程语言...
PHP图片等比例缩放生成缩略图函数分享
12-19
等比例缩放意味着保持原始图片的宽高比，防止拉伸或压缩图片导致变形。在PHP中，我们通常会用到GD库，它提供了丰富的图像处理函数，如`imagesx`、`imagesy`用于获取图片的宽度和高度，以及`imagecreatetruecolor`...
php图片上传类，目录自动分割、等比例缩略图 开发技术.zip
最新发布
09-25
- 等比例缩略图生成是图像处理的重要部分，它能保持原始图像的比例，避免拉伸或变形。 - PHP的GD库或Imagick扩展可以用于创建缩略图。通过计算源图像和目标尺寸的比例，然后进行相应的裁剪或缩放。 - 缩略图类...
解决PHPCMS 自动缩略图不保持等比例
weixin_30952103的博客
08-10 451
> if($autocut) { $scale_w=$srcwidth/$maxwidth; $scale_h=$srcheight/$maxheight; if($srcwidth>$srcheight) { $createwidth=$maxwidth; $createheight=$src...
PbootCms禁止自动提取缩略图
dylan1989的博客
01-25 707
前言 群里有同学问，PbootCMS总是自动提取文章里的图片作为缩略图， 有时候第一张图可能是一张很小的图片， 或者其他原因，并不适合作为缩略图呈现。 这个时候PbootCms的智能就显得有些多余。 这里来教大家修改一下程序， 实现禁止PbootCms自动提取文章第一张图作为缩略图。 操作步骤 使用你的IDE工具，VScode、Sublime等工具， 使用“无缩略图时”作为关键词搜索整个项目， 会搜索到2个文件，共3处代码。 我们打开搜索到的代码位置，如下：
解决dedecms缩略图变形,dede缩略图失真
shilianweiyao的专栏
03-18 1180
dede默认只生成一个规格大小的缩略图，而往往在一个站不同页面内需要的缩略图大小不一致，比例不一致，这就造成了缩略图不清晰，失真，下面提供的方法就完美解决了这个问题。 使用方法： 一、要获得清晰的缩略图就要有足够大的图片并准确的剪裁，而下面的方法就是根据缩略图来进行剪裁的（因原图部分网站有水印），所以就必须要保证原来的缩略图足够大，所以要进行一下设置：系统-附件设置，把缩略图默认宽度、默认
制作缩略图，防图片变形
apinghappy
07-03 672
onload="ResizeImg(this,100,100)"<img src="upfile/proimage/1.jpg" width=300 border=0 height="300" onload="ResizeImg(this,300,300)"> function ResizeImg(ImgD,xx,yy){
解决dedecms缩略图缩放变形问题
分享干货，拒绝水文
06-29 580
解决dedecms缩略图缩放变形问题，我们知道，dedecms缩略图是自动提取，相当于原图的等比例缩放了，比如后台设置缩略图的尺码为：120*90即为3:2的图片，但是假如内容里的大图尺码为300*300即1:1，这样生成出来的图片就会变形，直接后台设置的缩略图大小不起作用啊，这样严重影响网站美观，本文介绍通过修改dedecms生成缩略源码方法解决定问题。 打开include/image.fun...
缩略图不变形
weixin_30243533的博客
08-22 157
需求：图片按九宫格展示，图片展示其缩略图（不变形），点击可看大图。（本文暂时只讨论展示缩略图不变形的方案）图片要求有两点：1.缩略，2.不变形。需要同时实现这两点，也就是图片的width和height中较小者应该完全显示，较大的截取中间的部分。如下图是这样： 而不是: 分析：想要根据图片的宽高来判断如果截取，需要图片load之后，在load之前要保证九宫格样式不乱，所以我在图片外面包了...
解决dedecms(5.6/5.7)缩略图缩放变形问题方法
zxy840552216的博客
07-23 209
解决dedecms(5.6/5.7)缩略图缩放变形问题方法，我们知道，dedecms缩略图是自动提取，相当于原图的等比例缩放了，比如后台设置缩略图的尺码为：120*90即为3:2的图片，但是假如内容里的大图尺码为300*300即1:1，这样生成出来的图片就会变形，直接后台设置的缩略图大小不起作用啊，这样严重影响网站美观，本文介绍通过修改dedecms生成缩略源码方法解决定问题。 打开include/image.func.php文件，该文件在dedecms5.6/5.7中所在的目录不一样，5.6中文件在
织梦dedecms5.7缩略图变形问题解决方法
zhang01457的博客
12-31 341
dedecms5.7种列表页调用缩率图用的标签是“[field:array runphp='yes']@me = (empty(@me['litpic']) ? "" : "<a href='{@me['arcurl']}' class='preview'><img src='{@me['litpic']}'/></a>"); [/field:array]”这个...
实现等比例缩略图生成的方法与代码示例
假设我们有一个名为`thumbnail.php`的PHP脚本，用于生成等比例缩略图。该脚本主要使用GD库来处理图片。下面是一个简单的示例代码的逻辑： ```php // 获取目标宽度，这里是通过URL参数或者配置文件设定的 $width = ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值