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

HTML5保持图像的宽高比?

如何解决《HTML5保持图像的宽高比?》经验,为你挑选了1个好方法。

我刚注意到Chrome会调整此图片的大小,保持其宽高比:


当HTML5 doctype不存在时,图像会失真:


这仅在图像的容器是文档时有效,如果图像在div例如中则不起作用.

这个功能是什么,我能以某种方式将图像缩放到完整的窗口大小而不删除doctype吗?



1> BoltClock..:

这个"功能"是专属的怪异模式,其中htmlbody具有100%的高度,和顶层元件的高度相对于由body.在标准模式下,htmlbody作为与汽车高度普通块盒.由于百分比高度不能相对于自动高度,因此height: 100%不会生效,并且图像在标准模式下保持其纵横比.

这也是为什么body背景完全以怪异模式显示,而不是在标准模式下,当没有足够的内容来填充页面时.

为了获得在标准模式下的怪癖模式行为,设定height: 100%了对html元素min-height: 100%body所描述的元素在这里.


推荐阅读
  • 前端常用的布局类型——前端布局
    1.Static静态布局固定宽高:2.Liquid流式布局宽高用百分比,按屏幕分辨率调整,布局不发生变化3.Adaptive自适应 ... [详细]
  • Vue项目中应用骨架屏实践
    在当前开发的项目中,由于登录过程涉及多次重定向,导致用户体验不佳。为了改善这一状况,本文介绍了如何使用vue-skeleton-webpack-plugin插件在Vue项目中实现骨架屏,以减少用户感受到的白屏时间。 ... [详细]
  • 本文探讨了前端包管理器的核心功能,包括注册机制、文件存储、上传下载、以及依赖分析等关键特性,并介绍了几种流行的前端包管理工具。 ... [详细]
  • 本文详细介绍了使用JavaScript和jQuery进行页面加载初始化的方法,包括不同的实现方式及其应用场景,并探讨了两者在初始化过程中的主要区别。 ... [详细]
  • 本文介绍了如何通过自定义配置类,利用 `WebMvcConfigurer` 接口来扩展 Spring MVC 的功能,实现默认首页的自动跳转,同时避免使用 `@EnableWebMvc` 注解全面接管 Spring MVC 的默认配置。 ... [详细]
  • Python库在GIS与三维可视化中的应用
    Python库极大地扩展了GIS的能力,使其能够执行复杂的数据科学任务。本文探讨了几个关键的Python库,这些库不仅增强了GIS的核心功能,还推动了地理信息系统向更高层次的应用发展。 ... [详细]
  • 深入理解Android NinePatch图片在聊天界面的应用
    本文探讨了在开发Android应用,特别是聊天界面时,如何有效利用NinePatch图片解决图片拉伸问题。文章通过实例展示了不使用与使用NinePatch图片的区别,并详细介绍了如何创建和使用NinePatch图片。 ... [详细]
  • 在进行微信小程序开发过程中,遇到了需要实现类似微信朋友圈那样的长文本折叠功能的需求。本文将详细探讨其实现方法及注意事项。 ... [详细]
  • 精选6款开源Web性能优化工具,助力前端开发
    本文精选了6款开源Web性能优化工具,旨在帮助前端开发者提升页面加载速度,改善用户体验。 ... [详细]
  • 本文介绍了如何利用Selenium和Python通过执行JavaScript代码来控制网页中的滚动条,包括垂直和水平滚动条的控制,以及特定元素的聚焦技术。 ... [详细]
  • 本文介绍了如何利用Webpack中的HtmlWebpackPlugin插件实现HTML文件的自动化生成,包括详细的安装步骤和配置方法。 ... [详细]
  • 本文探讨了亚马逊Go如何通过技术创新推动零售业的发展,以及面临的市场和隐私挑战。同时,介绍了亚马逊最新的‘刷手支付’技术及其潜在影响。 ... [详细]
  • 网页中正确显示英语音标的方法与实例
    在开发教育类网站时,经常遇到的一个问题是如何在网页上正确显示英语音标,以及为何某些情况下音标会显示为乱码。本文将探讨这些问题的成因及解决方案。 ... [详细]
  • 本文介绍了如何使用Selenium中的Keys类来模拟各种键盘操作,包括普通按键和组合键(如Ctrl+A)的使用方法。 ... [详细]
  • 动画队列的设计目的是为了确保一系列任务能够按照预定顺序执行,每个任务只有在其前一个任务完成后才开始。这些任务既可以是同步的,也可以是异步的。本文将探讨jQuery动画系统中的队列机制,并介绍如何使用队列来优化动画效果。 ... [详细]
author-avatar
手机用户2502935197
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有