调整未知大小和宽高比的图像大小

Resizing image of unknown size and aspect ratio

本文关键字：图像 高比 未知 调整      更新时间：2023-09-26

我基本上有一组未知大小的图像。有些可以有width> height，反之亦然。

我需要显示这些项目缩放到适合300x300框。其中一些图像小于300x300，需要放大，一些更大，需要缩小。

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

即一个尺寸需要适合于盒子和其他尺寸需要按宽高比调整大小

因为这是一个用户选择的对象在数据库中，我最初尝试在javascript，但我挣扎。我很好奇是否有一种纯CSS的方式来做到这一点。

Hello你可以使用下面的代码只使用css和javascript

，这将保持您的外观比例也

<style type="text/css">
    .image_box{
        width: 300px;
        height: 300px;
        background: #FF0;
    }
</style>
<div class="image_box">
    <img src="1.jpg"  id="imageid">
</div>
<script type="text/javascript">
    var img = document.getElementById('imageid'); 
    //or however you get a handle to the IMG
    var width = img.clientWidth;
    var height = img.clientHeight;
    //alert(width);
    //alert(height);
    if(width>height){
         img.style.width = '300px';
    }else{
        img.style.height = '300px';
    }
</script>

对于纯CSS，有两种方法可以做到这一点。

选项1:CSS Background-Image(推荐)

您可以将图像设置为div的背景，然后将div的高度设置为所需的尺寸。

<div class="background"></div>
.background {
  background-image: url("SOMEURL");
  background-size: cover;
  background-position: center center;
  width: 150px;
  height: 300px;
}

你可以设置background-size为cover来缩放背景图像，使其占用可用的宽度或高度。

由于浏览器支持较好(ie9 +)，建议使用此方法

演示:

http://codepen.io/aaronvanston/pen/NbrYWM

选项2:使用图像并设置object-fit

您可以使用正常的图像来代替

<img src="SOMEURL" class="fit-image" >
.fit-image {
  width: 150px;
  height: 300px;
  object-fit: cover;
}
演示:

http://codepen.io/aaronvanston/pen/gLMeMX

这与背景图像做同样的事情，但它使用的是image元素。但是，不支持这种方法。(不支持IE) http://caniuse.com/#feat=object-fit

解决方案是两个主要功能的组合;

    使用透明的gif或png图像，大小为300x300px
  1. css为背景图像和使用background-size:contain属性值。

这里有一个例子，我使用了一个100 × 200的图像和一个800 × 400的图像。http://codepen.io/partypete25/pen/ZBOxKg/

不指定宽度和高度(使用透明图像来保持正确的长宽比)的好处是，您可以在响应式构建中使用此实现。

Method1与简单的css:(这样小图片将不会缩放到容器)

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

更新方法2:(这使用背景图像，也适用于小图片，它是ok的现代浏览器，包括IE9+)

<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>
相关文章：