`
lij2960
  • 浏览: 17649 次
  • 性别: Icon_minigender_1
  • 来自: 济南
社区版块
存档分类
最新评论

利用javascript设置图片等比例缩小

 
阅读更多

网站的内容页面,经常要放图片,如果图片太大会撑出,影响页面美观。如果只是用css限

制图片的最大宽度,会引起图片的变形,本文建议还是用js来实现,实现方式如下:

<script language="javascript" type="text/javascript">
        window.onload = function () {
            //判断图片大小,超过一定宽度,要通过js定义图片大小
            $.each($(".sec-content img"), function (i, v) {
                if (v.width > 740)
                {
                    v.width = 740; //重定义编辑器自带的宽度
                    v.removeAttribute('height'); //移除编辑器自带的图片高度
                }
            });
        }

    </script>

 


注意,引用本方法前前先引入jQuery。$(".sec-content img")这里是文章内容中的图片筛

选。

分享到:
评论

相关推荐

    js实现图片等比例缩放

    在网页设计中,图片的等比例缩放是一个常见的需求,特别是在响应式布局中,为了保持图像的原始比例,避免拉伸或压缩导致变形,我们通常会利用JavaScript来动态调整图片大小。本文将深入探讨如何使用JavaScript实现...

    图片等比例缩放,网页图片处理方法

    本文将详细介绍如何利用JavaScript(简称JS)以及jQuery这两种常用前端技术实现图片的等比例缩放。 #### 一、基础知识简介 **1.1 图片等比例缩放的概念** 等比例缩放是指在调整图片大小时保持其原始宽高比不变的...

    jquery图片等比例缩放

    本文将深入探讨如何利用jQuery实现图片的等比例缩放。 ### 等比例缩放的原理 等比例缩放的核心在于保持图片的宽高比,即宽度与高度的比例不变。在CSS中,我们通常设置`max-width: 100%`和`max-height: 100%`来限制...

    图片按比例缩放

    缩放图片的工具和方法多种多样,其中最常用的是使用图像编辑软件,例如Adobe Photoshop、GIMP或在线工具。这些工具通常提供“自由变换”功能,允许用户输入特定的缩放比例,或者通过拖动角落的控制点来等比例调整...

    js图片缩放效果制作鼠标滚动图片等比例缩放

    在网页设计中,动态的图片展示效果可以提升用户体验,其中一种常见的技术是通过JavaScript实现鼠标滚动时图片等比例缩放。...以上就是利用JavaScript实现鼠标滚动时图片等比例缩放的详细解析,希望对你的项目有所帮助。

    javascript实现图片缩放

    5. 使用CSS3的变换:除了直接修改图片元素的`width`和`height`属性,还可以利用CSS3的`transform`属性进行平移、旋转、缩放等操作。这可以提供更好的性能,因为浏览器可以使用硬件加速。例如,应用20%的缩放可以通过...

    js按比例缩放图片且垂直居中显示图片

    "js按比例缩放图片且垂直居中显示图片"这个主题涉及到的是使用JavaScript技术来处理图片的尺寸调整和布局定位,使得图片无论在何种分辨率或屏幕尺寸下都能保持良好的视觉效果。这里我们将详细探讨这一技术实现的原理...

    js图片等比例缩放

    在探讨“js图片等比例缩放”的主题时,我们深入解析了如何利用JavaScript来实现图片的等比例缩放,这是一个在网络开发中极为实用且常见的需求。等比例缩放的目的是为了适应不同尺寸的屏幕或布局需求,同时保持图片...

    js图片缩放效果制作鼠标滚动图片等比例缩放代码.zip

    总结来说,"js图片缩放效果制作鼠标滚动图片等比例缩放代码"是一个利用JavaScript实现的网页动态效果,通过监听滚动事件、计算缩放比例和应用CSS3动画,使得图片在鼠标滚动时能够平滑、等比例地缩放,提升了网页的...

    图像等比例缩放 等比例缩放图片

    1. **网页设计**:为了适应不同分辨率和屏幕尺寸的设备(如手机、平板电脑、台式机等),网页设计师经常需要对页面中的图片进行等比例缩放。 2. **移动应用开发**:在移动应用中,根据用户的设备屏幕尺寸自动调整...

    jQuery图片等比例缩放截取显示代码.zip

    "jQuery图片等比例缩放截取显示代码" 是一种解决图片在不同尺寸屏幕下不失真的技术,它利用jQuery库和一个名为jQThumb的插件实现。这里我们将深入探讨这个技术的工作原理、实现方式以及其优势。 首先,jQuery是一个...

    jQuery图片等比例缩放图片左右垂直居中

    "jQuery图片等比例缩放图片左右垂直居中"这个话题聚焦于如何利用jQuery库解决这个问题。jQuery,作为一款强大的JavaScript库,简化了DOM操作、事件处理以及动画效果,使得在网页上实现复杂的功能变得更加简单。 ...

    js按比例缩放图片,不变形,不失真

    本篇文章将详细介绍如何利用JavaScript实现按比例缩放图片,以保持其原始比例,确保图片质量不受影响。 首先,我们需要理解图片变形和失真的原因。当一个图片的宽高比(宽度与高度的比例)与显示区域的宽高比不一致...

    最新上传图片预览及等比例缩放.net实例

    其次,等比例缩放图片是为了保持原始图片的比例,防止拉伸变形。这可以通过计算图片的宽高比来实现。当设定一个目标宽度或高度时,根据比例调整另一个维度,确保两个维度的缩放比例相同。在.NET中,可以使用Bitmap...

    原生JavaScript制作网页div里面大图片按比例缩放排列

    "原生JavaScript制作网页div里面大图片按比例缩放排列"这个主题聚焦于如何使用JavaScript动态调整图片尺寸,使其适应div容器并保持正确的比例,从而提供良好的用户体验。下面将详细介绍这个过程中的关键知识点。 1....

    js控制图片缩放 不失真 获取图片真实长和宽

    以上就是利用JavaScript实现图片等比例缩放、切换时不失真的基本方法。在实际应用中,你可能需要根据具体需求进行调整,比如处理图片加载状态、优化性能或者增加动画效果等。记住,关键在于计算合适的缩放比例,以及...

    图片等比例缩放

    ### 图片等比例缩放——CSS技巧解析与应用 #### 一、问题背景与解决方案概述 在网页设计过程中,图片的尺寸控制对于保持页面布局的美观性和响应性至关重要。经常出现的问题是,当上传的图片尺寸过大时,可能会导致...

    利用javascript实现图片动态的放大和缩小

    以下将详细介绍如何利用JavaScript来实现这一功能。 首先,我们需要一个HTML页面作为展示图片的基础,`expand.html`文件可能包含以下结构: ```html &lt;!DOCTYPE html&gt; 图片放大缩小 img { width: 100px; /...

    javascript 图片自动缩放

    有时候,我们希望图片能够自动适应不同的屏幕尺寸或布局,这时可以利用JavaScript实现图片的自动缩放功能。"javascript 图片自动缩放"是一个实用的技术,它可以帮助开发者确保图片在不同设备和分辨率下都能保持良好...

    jquery图片等比例缩放图片左右垂直居中

    "jquery图片等比例缩放图片左右垂直居中"这个主题,涉及到的是使用jQuery库来实现图片在网页中既能保持原图比例缩放,又能确保图片在容器内居中显示的技术。这是一种常见的布局需求,尤其在响应式设计中更为常见。...

Global site tag (gtag.js) - Google Analytics