图片等比例缩放方案
图片等比例缩放方案
在Web开发时无可避免的需要将图片进行缩放，缩放时需要保证图片不变形，也就是需要等比例缩放。
设定宽度或高度
引入图片时，仅设置图片的width或者是height就可以使另一边自适应，从而实现等比例缩放。
<section><img id="t1" src="http://www.sdust.edu.cn/__local/9/7A/B1/F29B84DEF72DD329997E8172ABA_664BA3EF_32466.jpg"><img id="t2" src="http://www.sdust.edu.cn/__local/B/F3/E4/693AB931C9FFB84646970D53BFE_C506394A_4282CA.jpg">
</section>
<style type="text/css">#t1{width: 500px;}#t2{height: 300px;}
</style>
设定最大宽度或最大高度
引入图片时，仅设置图片的max-width或者是max-height就可以使另一边自适应，从而实现等比例缩放。
<section><img id="t3" src="http://www.sdust.edu.cn/__local/F/7A/AA/E1459849AA8AB0C89854A41BD41_BF3BD857_BC0D8.jpg"><img id="t4" src="http://www.sdust.edu.cn/__local/1/95/CB/EDC1450B8FD1B8A25FAAC726AA4_A36D4253_16C91.jpg">
</section>
<style type="text/css">#t3{max-width: 500px;}#t4{max-height: 300px;}
</style>
根据父容器适应
将图片设定为max-width: 100%;与max-height: 100%;，就可以自适应父容器宽高进行等比缩放。
<section><div id="t5"><img src="http://www.sdust.edu.cn/__local/9/7A/B1/F29B84DEF72DD329997E8172ABA_664BA3EF_32466.jpg"></div>
</section>
<style type="text/css">#t5{height: 300px;width: 600px;border: 1px solid #eee;display: flex;justify-content: center;}#t5 > img{max-width: 100%;max-height: 100%;}
</style>
使用Js设定宽高
使用JavaScript预先取得图片并根据指定的高度或者是宽度计算缩放比，从而计算出另一边的长度，设定好宽高后加入文档。
<section><div id="t6"></div>
</section>
<script type="text/javascript">var img = new Image();var height = 300;img.src = "http://www.sdust.edu.cn/__local/B/F3/E4/693AB931C9FFB84646970D53BFE_C506394A_4282CA.jpg";img.onload = function(){var scale = height / this.height;this.height = height;this.width = this.width * scale;document.getElementById("t6").appendChild(this);}
</script>
使用CSS背景属性
使用CSS的background属性进行等比缩放。
<section><div id="t7"></div>
</section>
<style type="text/css">#t7{height: 300px;width: 600px;border: 1px solid #eee;background: url("http://www.sdust.edu.cn/__local/F/7A/AA/E1459849AA8AB0C89854A41BD41_BF3BD857_BC0D8.jpg") center center no-repeat;background-size: contain;}
</style>
使用CSS转换属性
使用CSS的transform属性直接进行缩放。
<section><div id="t8"><img src="http://www.sdust.edu.cn/__local/1/95/CB/EDC1450B8FD1B8A25FAAC726AA4_A36D4253_16C91.jpg"></div>
</section>
<style type="text/css">#t8{height: 300px;width: 500px;overflow: hidden;}#t8 > img{transform: scale(0.6);transform-origin: 0 0;}
</style>
使用CSS适应属性
使用CSS的object-fit属性直接进行图片适应缩放。
<section><div id="t9"><img src="http://www.sdust.edu.cn/__local/F/7A/AA/E1459849AA8AB0C89854A41BD41_BF3BD857_BC0D8.jpg"></div>
</section>
<style type="text/css">#t9{height: 300px;width: 600px;border: 1px solid #eee;display: flex;justify-content: center;}#t9 > img{object-fit: contain;}
</style>
代码示例
<!DOCTYPE html>
<html>
<head><title>图片等比例缩放</title><style type="text/css">#t1{width: 500px;}#t2{height: 300px;}#t3{max-width: 500px;}#t4{max-height: 300px;}#t5{height: 300px;width: 600px;border: 1px solid #eee;display: flex;justify-content: center;}#t5 > img{max-width: 100%;max-height: 100%;}#t7{height: 300px;width: 600px;border: 1px solid #eee;background: url("http://www.sdust.edu.cn/__local/F/7A/AA/E1459849AA8AB0C89854A41BD41_BF3BD857_BC0D8.jpg") center center no-repeat;background-size: contain;}#t8{height: 300px;width: 500px;overflow: hidden;}#t8 > img{transform: scale(0.6);transform-origin: 0 0;}#t9{height: 300px;width: 600px;border: 1px solid #eee;display: flex;justify-content: center;}#t9 > img{object-fit: contain;}</style>
</head>
<body><section><img id="t1" src="http://www.sdust.edu.cn/__local/9/7A/B1/F29B84DEF72DD329997E8172ABA_664BA3EF_32466.jpg"><img id="t2" src="http://www.sdust.edu.cn/__local/B/F3/E4/693AB931C9FFB84646970D53BFE_C506394A_4282CA.jpg"></section><section><img id="t3" src="http://www.sdust.edu.cn/__local/F/7A/AA/E1459849AA8AB0C89854A41BD41_BF3BD857_BC0D8.jpg"><img id="t4" src="http://www.sdust.edu.cn/__local/1/95/CB/EDC1450B8FD1B8A25FAAC726AA4_A36D4253_16C91.jpg"></section><section><div id="t5"><img src="http://www.sdust.edu.cn/__local/9/7A/B1/F29B84DEF72DD329997E8172ABA_664BA3EF_32466.jpg"></div></section><section><div id="t6"></div></section><section><div id="t7"></div></section><section><div id="t8"><img src="http://www.sdust.edu.cn/__local/1/95/CB/EDC1450B8FD1B8A25FAAC726AA4_A36D4253_16C91.jpg"></div></section><section><div id="t9"><img src="http://www.sdust.edu.cn/__local/F/7A/AA/E1459849AA8AB0C89854A41BD41_BF3BD857_BC0D8.jpg"></div></section>
</body>
<script type="text/javascript">var img = new Image();var height = 300;img.src = "http://www.sdust.edu.cn/__local/B/F3/E4/693AB931C9FFB84646970D53BFE_C506394A_4282CA.jpg";img.onload = function(){var scale = height / this.height;this.height = height;this.width = this.width * scale;document.getElementById("t6").appendChild(this);}
</script>
</html>
每日一题
https://github.com/WindrunnerMax/EveryDay