JavaScript图片等比例缩放裁切

2018-4-19 11:08| 发布者: admin| 查看: 421| 评论: 0|来自: 蚂蚁部落

实际应用中,可能需要讲一个图片放置于一个容器中,并且保证图片在填充满容器的基础上,还不能变形。

总结来说要求如下:

(1).图片不能变形。

(2).容器需要被完全填充。

但是图片不能保证在长宽比例上与容器的长宽比例相同,所以图片可能需要被缩放裁切。

如果将图片设置为容器的背景图片,实现起来非常轻松,一段CSS3代码即可实现:

[CSS] 纯文本查看 复制代码
background-size:cover;

background-size用法参阅CSS3 background-size一章节。

下面介绍一下如何利用JavaScript来控制容器中图片等比例缩放裁切功能。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
* {
  margin:0px;
  padding:0px;
}
div {
  border:1px solid blue;
  width:300px;
  height:200px;
  font-size:0px;
}
</style>
<script>
/**
 * @param {dom} ImgBox 图片的容器
 * @param {img} ImgD 将要被裁切的图片对象.
 * @return {number} iwidth 限定图片的宽度.
 * @return {number} iheight 限定图片的高度.
*/
let DrawImage = (ImgBox, ImgD, iwidth, iheight) => {
  ImgBox.style.overflow = "hidden";
  console.log(ImgD);
  console.log(ImgD.width);
  if (ImgD.width > 0 && ImgD.height > 0) {
    if (ImgD.width / ImgD.height >= iwidth / iheight) {
      ImgD.height = iheight;
      ImgD.width = (image.width / image.height) * iheight;
    }
    else {
      ImgD.width = iwidth;
      ImgD.height = (ImgD.height / ImgD.width) * iwidth;
    }
  }
}
window.onload = function () {
  let odiv = document.getElementsByTagName("div")[0];
  let oimg = document.getElementById("ant");
  DrawImage(odiv, oimg, 300, 200)
}
</script>
</head>
<body>
<div><img id="ant" src="demo/js/img/pretty.jpg"></div>
</body>
</html>

上面代码实现了预期效果,简单介绍一下它的实现原理。

一.实现原理:

(1).如果图片的长宽比大于容器的长宽比,这说明图片的width相对更大。

那么只要将图片的高度设置为容器的高度即可,宽度超出的裁切掉。

(2).如果图片的长宽比小于容器的长宽比,这说明图片的height相对更大。

那么只要将图片的宽度设置为容器的宽度即可,高度超出的裁切掉。

二.相关阅读:

(1).document.getElementsByTagName参阅JavaScript getElementsByTagName()一章节。

(2).document.getElementById参阅document.getElementById()一章节。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部