使用JavaScript解决网页图片拉伸问题

最新推荐文章于 2024-08-10 07:23:02 发布

xiaojimanman

最新推荐文章于 2024-08-10 07:23:02 发布

阅读量8.9k

点赞数 3

分类专栏： java 文章标签： JavaScript 图片拉伸网页

本文链接：https://blog.csdn.net/xiaojimanman/article/details/53084716

版权

本文探讨了如何解决网页中图片因尺寸不确定导致的拉伸问题。通过获取图片真实尺寸和容器大小，动态设置图片的width和height属性，确保图片在不同尺寸下保持最佳展示效果。文中介绍了三种方法：保证宽度一致、保证高度一致和铺满显示区域，以适应不同的布局需求。

摘要由CSDN通过智能技术生成

转载请注明出处：http://blog.csdn.net/xiaojimanman/article/details/53084716

http://www.llwjy.com/blogdetail/92b85d1cdb0343a7bd6d8dd0868c0f82.html

个人博客站已经上线了，网址 www.llwjy.com ~欢迎各位吐槽~

-------------------------------------------------------------------------------------------------

在开始之前先打一个小小的广告，自己创建一个QQ群：321903218，点击链接加入群【Lucene案例开发】，主要用于交流如何使用Lucene来创建站内搜索后台，同时还会不定期的在群内开相关的公开课，感兴趣的童鞋可以加入交流。

问题描述

这段时间在做PM的需求的时候突然发现一个问题，产品上的图片来自多个第三方，具体的尺寸无法确定，如果直接在样式中写死图片的尺寸大小就会出现图片拉伸的现象，十分影响产品的美观，因此希望可以找到一个比较好的解决方案。自己先做了一个简单的demo来展示问题。

<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<script src="./js/jquery-1.11.1.min.js"></script>
	<style>
		.img1{width:200px;height:200px;border: 1px solid #000;overflow: hidden;margin: 10px;}
		.img2{width:200px;height:90px;border: 1px solid #000;overflow: hidden;margin: 10px;}	
	</style>
</head>	
<body>
	<div class="img1" style="width:">
		<img id="img1" src="./img/1.jpg" height="100%" width="100%">
	</div>
	<div class="img2" style="width:">
		<img id="img2" src="./img/1.jpg" height="100%" width="100%">
	</div>
</body>
</html>