JS怎样阻止图片拉伸自适应-js教程-PHP中文网

首页

web前端

js教程

JS怎样阻止图片拉伸自适应

php中世界最好的语言

Apr 13, 2018 pm 02:11 PM

javascript拉伸

这次给大家带来JS怎样阻止图片拉伸自适应，JS阻止图片拉伸自适应的注意事项有哪些，下面就是实战案例，一起来看一下。

前言

相信大家在日常的web开发中，作为前端经常会遇到处理图片拉伸问题的情况。

例如banner、图文列表、头像等所有和用户或客户自主操作图片上传的地方，而一旦牵扯图片，就会涉及到图片拉伸的问题，当然，在图片上传时做手动裁切，让用户或客户清晰的感知到图片的有效内容才是最优的解决方案，但是在其他各种外在因素下，没有做裁切的话，就需要在前端显示上做处理了，满足在上传任意大小图片的情况下，最优显示效果的需求。

把图片放进框框，要几步？三步...我们开始

第一步：先画个框框（这里顺便安利一种自适应框框的方法）

// 假定需要一个在750px屏幕下宽400px，高280px的盒子
// 宽度 = 400 / 750 = 0.5333
// 高度 = 280 / 400 * 0.5333 = 0.3733
<style>
 .img-box{
  position: relative;
  width: 53.33%;
  height: 0;
  padding-bottom: 37.33%;
  overflow: hidden;
  background-color: #eee;
 }
</style>
<body>
 <p id="list">
  <p class="img-box">
   <img src="..."/>
  </p>
 </p>
</body>

第二步：设置图片需要使用到的css

<style>
 .width{
  position: absolute !important;
  width: 100% !important;
  min-height: 100% !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  -ms-transform: translateY(-50%) !important;
  -moz-transform: translateY(-50%) !important;
  -webkit-transform: translateY(-50%) !important;
  -o-transform: translateY(-50%) !important;
  display: block;
 }
 .height{
  position: absolute !important;
  height: 100% !important;
  min-width: 100% !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  -ms-transform: translateX(-50%) !important;
  -moz-transform: translateX(-50%) !important;
  -webkit-transform: translateX(-50%) !important;
  -o-transform: translateX(-50%) !important;
  display: block;
 }
</style>

第三步：js获取图片高度比较并给img添加类名

//需要注意的是，不能在css中直接给img设置宽度和高度
//否则在img.onload后获取的宽高是css设置的宽高
//同时建议使用dom对象来获取img标签
<script>
 var list = document.getElementById('list');
 getImgWH ( list );
 //执行宽高比对并设置img类名
 function getImgWH ( Obj ) {
  var img = Obj.getElementsByTagName('img');
  for( var i=0 ; i<img.length ; i++ ){
   img[i].onload = function(){
    var width = this.width;
    var height = this.height;
    if ( width > height ) {
     this.classList.add('height');
    } else if ( width < height ) {
     this.classList.add(&#39;width&#39;);
    } else {
     this.style.width = &#39;100%&#39;;
     this.style.height = &#39;100%&#39;;
    }
   }
  }
 }
</script>

图片防止拉伸处理比较简单，但是在实际项目中需要得到足够的重视，一个web页面成也图片，败也图片，拉伸了图片就等着设计师的磨叽吧，哈哈哈哈...

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

Jstree选中父节点时禁用子节点也被选中

Swiper里自定义分页器使用步奏详解

以上是JS怎样阻止图片拉伸自适应的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

超越浏览器：现实世界中的JavaScriptApr 12, 2025 am 12:06 AM

JavaScript在现实世界中的应用包括服务器端编程、移动应用开发和物联网控制：1.通过Node.js实现服务器端编程，适用于高并发请求处理。2.通过ReactNative进行移动应用开发，支持跨平台部署。3.通过Johnny-Five库用于物联网设备控制，适用于硬件交互。

使用Next.js（后端集成）构建多租户SaaS应用程序Apr 11, 2025 am 08:23 AM

我使用您的日常技术工具构建了功能性的多租户SaaS应用程序（一个Edtech应用程序），您可以做同样的事情。首先，什么是多租户SaaS应用程序？多租户SaaS应用程序可让您从唱歌中为多个客户提供服务

如何使用Next.js（前端集成）构建多租户SaaS应用程序Apr 11, 2025 am 08:22 AM

本文展示了与许可证确保的后端的前端集成，并使用Next.js构建功能性Edtech SaaS应用程序。前端获取用户权限以控制UI的可见性并确保API要求遵守角色库

JavaScript：探索网络语言的多功能性Apr 11, 2025 am 12:01 AM

JavaScript是现代Web开发的核心语言，因其多样性和灵活性而广泛应用。1)前端开发：通过DOM操作和现代框架（如React、Vue.js、Angular）构建动态网页和单页面应用。2)服务器端开发：Node.js利用非阻塞I/O模型处理高并发和实时应用。3)移动和桌面应用开发：通过ReactNative和Electron实现跨平台开发，提高开发效率。

JavaScript的演变：当前的趋势和未来前景Apr 10, 2025 am 09:33 AM

JavaScript的最新趋势包括TypeScript的崛起、现代框架和库的流行以及WebAssembly的应用。未来前景涵盖更强大的类型系统、服务器端JavaScript的发展、人工智能和机器学习的扩展以及物联网和边缘计算的潜力。

神秘的JavaScript：它的作用以及为什么重要Apr 09, 2025 am 12:07 AM

JavaScript是现代Web开发的基石，它的主要功能包括事件驱动编程、动态内容生成和异步编程。1)事件驱动编程允许网页根据用户操作动态变化。2)动态内容生成使得页面内容可以根据条件调整。3)异步编程确保用户界面不被阻塞。JavaScript广泛应用于网页交互、单页面应用和服务器端开发，极大地提升了用户体验和跨平台开发的灵活性。