热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

img标签直接设置width和height属性,与用style设置width和height的区别

今天做页面轮播图的时候发现了一个很奇怪的问题:用style属性给img标签设置width和height,图片可以显示完全,但图片比例会发生改变,图片变形。用img标签里面的widt

今天做页面轮播图的时候发现了一个很奇怪的问题:

用style属性给img标签设置width和height,图片可以显示完全 ,但图片比例会发生改变,图片变形。

用img标签里面的width和height属性给图片设置高度和宽度,图片比例不会改变,图片也没变形,但图片会显示不完全。

用style设置img标签width和height的效果:

《img标签直接设置width和height属性,与用style设置width和height的区别》

《img标签直接设置width和height属性,与用style设置width和height的区别》

直接设置img标签的width和height的效果:

《img标签直接设置width和height属性,与用style设置width和height的区别》
《img标签直接设置width和height属性,与用style设置width和height的区别》

网上查了一下,下面这个答案感觉还可以接受(但不知道解释的对不对。。):
《img标签直接设置width和height属性,与用style设置width和height的区别》

注:这里说的前面指的是用style设置宽高,后面指的是直接设置img标签的width和height属性。


推荐阅读
  • 深入剖析JVM垃圾回收机制
    本文详细探讨了Java虚拟机(JVM)中的垃圾回收机制,包括其意义、对象判定方法、引用类型、常见垃圾收集算法以及各种垃圾收集器的特点和工作原理。通过理解这些内容,开发人员可以更好地优化内存管理和程序性能。 ... [详细]
  • 深入理解ExtJS:从入门到精通
    本文详细介绍了ExtJS的功能及其在大型企业前端开发中的应用。通过实例和详细的文件结构解析,帮助初学者快速掌握ExtJS的核心概念,并提供实用技巧和最佳实践。 ... [详细]
  • HTML基础入门指南
    本文将深入浅出地介绍HTML的基础知识,包括其定义、开发工具、制定机构、特性、基本标签及更多实用内容。 ... [详细]
  • 深入解析ESFramework中的AgileTcp组件
    本文详细介绍了ESFramework框架中AgileTcp组件的设计与实现。AgileTcp是ESFramework提供的ITcp接口的高效实现,旨在优化TCP通信的性能和结构清晰度。 ... [详细]
  • 由二叉树到贪心算法
    二叉树很重要树是数据结构中的重中之重,尤其以各类二叉树为学习的难点。单就面试而言,在 ... [详细]
  • 本文介绍了一种基于选择排序思想的高效排序方法——堆排序。通过使用堆数据结构,堆排序能够在每次查找最大元素时显著提高效率。文章详细描述了堆排序的工作原理,并提供了完整的C语言代码实现。 ... [详细]
  • 本文详细介绍了如何在Android 4.4及以上版本中配置WebView以实现内容的自动高度调整和屏幕适配,确保中文显示正常,并提供代码示例。 ... [详细]
  • 推荐几款高效测量图片像素的工具
    本文介绍了几款适用于Web前端开发的工具,这些工具可以帮助用户在图片上绘制线条并精确测量其像素长度。对于需要进行图像处理或设计工作的开发者来说非常实用。 ... [详细]
  • 本文详细介绍了如何解决 Microsoft SQL Server 中用户 'sa' 登录失败的问题。错误代码为 18470,提示该帐户已被禁用。我们将通过 Windows 身份验证方式登录,并启用 'sa' 帐户以恢复其访问权限。 ... [详细]
  • 程序员如何优雅应对35岁职业转型?这里有深度解析
    本文探讨了程序员在职业生涯中如何通过不断学习和技能提升,优雅地应对35岁左右的职业转型挑战。我们将深入分析当前热门技术趋势,并提供实用的学习路径。 ... [详细]
  • 本文档介绍了如何在Visual Studio 2010环境下,利用C#语言连接SQL Server 2008数据库,并实现基本的数据操作,如增删改查等功能。通过构建一个面向对象的数据库工具类,简化了数据库操作流程。 ... [详细]
  • 在项目中使用 Redis 时,了解其不同架构模式(如单节点、主从复制、哨兵模式和集群)对于确保系统的高可用性和扩展性至关重要。本文将详细探讨这些模式的特点和应用场景。 ... [详细]
  • 当unique验证运到图片上传时
    2019独角兽企业重金招聘Python工程师标准model:public$imageFile;publicfunctionrules(){return[[[na ... [详细]
  • KMP算法是处理字符串匹配的一种高效算法它首先用O(m)的时间对模板进行预处理,然后用O(n)的时间完成匹配。从渐进的意义上说,这样时间复 ... [详细]
  • 优化Render Texture在RawImage中显示模型的质量
    本文探讨如何通过调整Render Texture的设置,提升UI界面中模型渲染的图片质量。同时,介绍一些替代方法来实现人物选择界面中的模型显示。 ... [详细]
author-avatar
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有