Fatal编程技术网
  • javascript/
  • Javascript 调整大小和纵横比未知的图像大小

Javascript 调整大小和纵横比未知的图像大小

javascript css image

Javascript 调整大小和纵横比未知的图像大小,javascript,css,image,Javascript,Css,Image,我基本上有一组大小未知的图像。有些可能具有宽度>高度，反之亦然 我需要在一个300x300框中显示这些按比例缩放的项目。其中有些图像小于300x300，需要放大，有些图像更大，需要缩小 所以基本上，如果我有一个图像是100x200，我需要它以150x300显示，如果我有一个图像是800x400，它需要显示为300x150 ie其中一个尺寸需要适合盒子，另一个尺寸需要适合盒子 需要根据纵横比调整大小 由于这是数据库中用户选择的对象，我最初在javascript中尝试过这一点，但我很挣扎。我很好奇是

我基本上有一组大小未知的图像。有些可能具有宽度>高度，反之亦然

我需要在一个300x300框中显示这些按比例缩放的项目。其中有些图像小于300x300，需要放大，有些图像更大，需要缩小

所以基本上，如果我有一个图像是100x200，我需要它以150x300显示，如果我有一个图像是800x400，它需要显示为300x150

ie其中一个尺寸需要适合盒子，另一个尺寸需要适合盒子 需要根据纵横比调整大小

由于这是数据库中用户选择的对象，我最初在javascript中尝试过这一点，但我很挣扎。我很好奇是否有一种纯粹的CSS方法可以做到这一点

您好，您可以使用下面的代码，只使用css和javascript

这也将保持你的相位定量


.图像盒{
宽度：300px；
高度：300px；
背景：#FF0；
}
var img=document.getElementById（'imageid'）；
//或者你如何处理IMG
变量宽度=img.clientWidth；
变量高度=img.clientHeight；
//警报（宽度）；
//警戒（高度）；
如果（宽度>高度）{
img.style.width='300px'；
}否则{
img.style.height='300px'；
}
使用纯CSS有两种方法可以做到这一点

选项1:CSS背景图像（推荐） 可以将图像设置为div的背景，然后将div的高度设置为所需的尺寸

<div class="background"></div>

.background {
  background-image: url("SOMEURL");
  background-size: cover;
  background-position: center center;
  width: 150px;
  height: 300px;
}


.背景{
背景图片：url（“SOMEURL”）；
背景尺寸：封面；
背景位置：中心；
宽度：150px；
高度：300px；
}
可以将背景大小设置为“覆盖”，以缩放背景图像，使其占据可用的宽度或高度

由于更好的浏览器支持，建议使用此方法（）

演示：

选项2：使用图像并设置对象匹配 您可以使用普通图像

<img src="SOMEURL" class="fit-image" >

.fit-image {
  width: 150px;
  height: 300px;
  object-fit: cover;
}


.fit图像{
宽度：150px；
高度：300px；
对象匹配：覆盖；
}
演示：

这与背景图像的作用相同，但是它使用了图像元素。但是，此方法不受支持。（不支持IE）

使用简单css的方法1：（这样小图片将无法扩展到容器）
更新方法2:（此方法使用背景图像，也适用于小型图片，适用于包括IE9+在内的现代浏览器）


.divImg{
宽度：300px；高度：300px；边框：2倍纯黑；
背景重复：无重复；
背景尺寸：包含；/*IE9+兼容*/
}
解决方案是两个主要功能的组合

  • 使用大小为300x300px的透明gif或png图像
  • css用于背景图像，并使用
    背景大小：contain
    属性值
    • 下面是一个示例，其中我使用了100x200图像和800x400图像。

    不指定宽度和高度（使用透明图像保持正确的纵横比）的好处是，您可以在响应构建中使用此实现

    我会这样做。我希望这个解决方案有帮助

    <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  .img-cont {
    border: solid 1px red;
    width: 300px; /* reference border */
    height: 300px;
  }
</style>
</head>
<body>
<!-- images with different dimensions -->
<div class="img-cont"><img src="https://dummyimage.com/800x400/000/fff" alt=""/></div>
<div class="img-cont"><img src="https://dummyimage.com/400x800/000/fff" alt=""/></div>
<div class="img-cont"><img src="https://dummyimage.com/100x200/000/fff" alt=""/></div>
<div class="img-cont"><img src="https://dummyimage.com/200x100/000/fff" alt=""/></div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">     
  (function($) {
    // max image width/height that we want
    var maxWidthAllowed = 300,
        maxHeightAllowed = 300;        
    function loadImg(imgObj) {        
      $('.img-cont img').one("load", function() {

        var imgWidth = $(this).get(0).naturalWidth,
            imgHeight = $(this).get(0).naturalHeight,
            coeff = imgWidth/imgHeight; // get image proportion
        if(parseFloat(coeff) > 1) {
          // wide image
          // resize proportionately
          $(this).css({
            'max-width': maxWidthAllowed,
            'width': '100%',
            'height' : 'auto'
          });
        } else {
          // thin image
          // resize proportionately
          $(this).css({
            'max-height': maxHeightAllowed,
            'height': '100%',
            'width' : 'auto'
          });
        }
      }).each(function() {
        if(this.complete) $(this).load();
      });
    }
    loadImg();
  })(jQuery);
    </script>
</body>
</html>

    
.img续{
边框：实心1px红色；
宽度：300px；/*参考边框*/
高度：300px；
}
（函数（$）{
//我们想要的最大图像宽度/高度
var maxWidthAllowed=300，
最大允许高度=300；
函数装入img（imgObj）{
$（'.img cont img'）.one（“加载”，函数（）{
var imgWidth=$（this）.get（0）.naturalWidth，
imgHeight=$（此）.get（0）.naturalHeight，
coeff=imgWidth/imgHeight；//获取图像比例
如果（浮点数（系数）>1）{
//宽图像
//按比例调整大小
$（this.css）({
“最大宽度”：允许的最大宽度，
“宽度”：“100%”，
“高度”：“自动”
});
}否则{
//薄图像
//按比例调整大小
$（this.css）({
“最大高度”：允许的最大高度，
“高度”：“100%”，
“宽度”：“自动”
});
}
}).each（函数（{
如果（this.complete）$（this.load（）；
});
}
loadImg（）；
})（jQuery）；
    所以您需要一个纯css解决方案，或者javascript也是可以接受的？为什么不只设置高度或宽度？而不是同时设置高度和宽度。而不是图像，将其设置为div的ad背景，背景大小：cover；背景位置：中心；应该将图像放在背景中，在中心放大，在边缘也不支持-当然OP希望
    包含宽度和高度为300px的
    而不是宽度为150px的
    封面
    ！！正确：）对于cover/contain，我不确定OP是希望剪切图像还是简单地包含图像并将其限制在边界框内。使用maxes时，100x200图像仍保留100x200@ThomasAnthony是的，你是对的，我已经更新了我的答案，以支持小图片

    <div style="width:300px; height:300px; border:2px solid black;">
    <img src="images/p1.jpg" style="max-width:300px; max-height:300px;" />
</div>

    

    <html>
<head>
<style type="text/css">
.divImg {
  width:300px; height:300px; border:2px solid black;
  background-repeat: no-repeat;
  background-size: contain; /* IE9+ compatible */
}
</style>
</head>
<body>  
    <div class="divImg" style="background-image:url(p1.jpg)">
    </div>
</body>
</html>

    

    <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  .img-cont {
    border: solid 1px red;
    width: 300px; /* reference border */
    height: 300px;
  }
</style>
</head>
<body>
<!-- images with different dimensions -->
<div class="img-cont"><img src="https://dummyimage.com/800x400/000/fff" alt=""/></div>
<div class="img-cont"><img src="https://dummyimage.com/400x800/000/fff" alt=""/></div>
<div class="img-cont"><img src="https://dummyimage.com/100x200/000/fff" alt=""/></div>
<div class="img-cont"><img src="https://dummyimage.com/200x100/000/fff" alt=""/></div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">     
  (function($) {
    // max image width/height that we want
    var maxWidthAllowed = 300,
        maxHeightAllowed = 300;        
    function loadImg(imgObj) {        
      $('.img-cont img').one("load", function() {

        var imgWidth = $(this).get(0).naturalWidth,
            imgHeight = $(this).get(0).naturalHeight,
            coeff = imgWidth/imgHeight; // get image proportion
        if(parseFloat(coeff) > 1) {
          // wide image
          // resize proportionately
          $(this).css({
            'max-width': maxWidthAllowed,
            'width': '100%',
            'height' : 'auto'
          });
        } else {
          // thin image
          // resize proportionately
          $(this).css({
            'max-height': maxHeightAllowed,
            'height': '100%',
            'width' : 'auto'
          });
        }
      }).each(function() {
        if(this.complete) $(this).load();
      });
    }
    loadImg();
  })(jQuery);
    </script>
</body>
</html>