如何在保持纵横比的同时自动调整图像大小

在保持纵横比（即图像的宽高比）的同时自动调整图像大小是图像处理中的一个常见需求，以确保图像在缩放过程中不会出现变形。要实现这个功能，我们通常需要执行以下步骤：

1. 获取原始纵横比： 我们首先获取原始图像的宽度和高度，并计算它的纵横比。纵横比通常是宽度除以高度（或者相反，取决于你希望如何定义）。

   python
   original_width = original_image.width
   original_height = original_image.height
   aspect_ratio = original_width / original_height

2. 确定新的尺寸： 根据我们需要的新大小，我们定义一个新的宽度或高度，并计算另一个维度以保持纵横比不变。

   例如，假设我们希望将图像宽度调整为 new_width，那么我们可以这样计算新的高度：

   python
   new_width = desired_width # 这是我们想要设置的新宽度
   new_height = new_width / aspect_ratio

   或者，如果我们有一个期望的高度 new_height，则计算新的宽度：

   python
   new_height = desired_height # 这是我们想要设置的新高度
   new_width = new_height * aspect_ratio

3. 执行图像调整大小： 有了新的宽度和高度后，我们就可以使用图像处理库（如Pillow库）进行实际的调整大小操作。

   python
   from PIL import Image
   resized_image = original_image.resize((int(new_width), int(new_height)), Image.ANTIALIAS)

4. 验证结果： 在完成调整大小后，我们应该验证新图像的纵横比是否与原始图像相同。

   python
   assert abs((resized_image.width / resized_image.height) - aspect_ratio) < tolerance

以下是一个实际的例子，假设我们有一个图像文件 example.jpg，我们想要将其宽度调整为500像素，同时保持原始纵横比：

python
from PIL import Image

# 打开原始图像
original_image = Image.open('example.jpg')

# 计算原始纵横比
original_width, original_height = original_image.size
aspect_ratio = original_width / original_height

# 设置新的宽度，并计算新的高度以保持纵横比
new_width = 500
new_height = int(new_width / aspect_ratio)

# 调整图像大小
resized_image = original_image.resize((new_width, new_height), Image.ANTIALIAS)

# 保存或显示调整后的图像
resized_image.save('resized_example.jpg')
# resized_image.show()

在这段代码中，我利用了Pillow库来完成图像的大小调整，同时确保新图像的高度会根据所需宽度自动计算，以保证纵横比不变。这样调整后的图像就不会出现拉伸或压缩变形。

不要对图像标签应用明确的宽度或高度。相反，给它：

shell
max-width:100%;
max-height:100%;

另外，height: auto;如果您只想指定宽度。

示例： http: //jsfiddle.net/xwrvxser/1/

shell
img {
    max-width: 100%;
    max-height: 100%;
}

.portrait {
    height: 80px;
    width: 30px;
}

.landscape {
    height: 30px;
    width: 80px;
}

.square {
    height: 75px;
    width: 75px;
}

Portrait Div
<div class="portrait">
    <img src="https://i.stack.imgur.com/xkF9Q.jpg">
</div>

Landscape Div
<div class="landscape">
    <img src="https://i.stack.imgur.com/xkF9Q.jpg">
</div>

Square Div
<div class="square">
    <img src="https://i.stack.imgur.com/xkF9Q.jpg">
</div>

运行代码片段隐藏结果

展开片段

事实证明还有另一种方法可以做到这一点：object-fit。

shell
<img style='height: 100%; width: 100%; object-fit: contain'/>

会做这项工作。当然，不要忘记包含其他必要的属性，例如 src和。alt

目前，对于 JPEG 或 PNG 文件等固定大小的图像，无法以确定的方式正确执行此操作。

**要按比例调整图像大小，必须将高度或宽度设置_为_“100%”，但不能同时设置两者。**如果您将两者都设置为“100%”，您的图像将被拉伸。

选择高度还是宽度取决于您的图像和容器尺寸：

1. 如果您的图像和容器都是“纵向形状”或都是“横向形状”（分别是高度大于宽度，或宽度大于高度），那么高度或宽度中的哪一个是“％100”并不重要。
2. 如果您的图像是纵向的，而容器是横向的，则必须height="100%"在图像上进行设置。
3. 如果您的图像是横向的，而容器是纵向的，则必须width="100%"在图像上进行设置。

如果您的图像是 SVG（一种可变大小的矢量图像格式），您可以自动进行扩展以适应容器。

您只需确保 SVG 文件的标签中没有设置以下属性<svg>：

shell
height
width
viewbox

大多数矢量绘图程序都会在导出 SVG 文件时设置这些属性，因此您每次导出时都必须手动编辑文件，或者编写脚本来完成此操作。

这是一个解决方案，即使提供的图像太小或太大而无法放入 div，也可以在 div 内垂直和水平对齐您的 img，而无需任何拉伸。

HTML 内容：

shell
<div id="myDiv">
  <img alt="Client Logo" title="Client Logo" src="Imagelocation" />
</div>

CSS 内容：

shell
#myDiv
{
  height: 104px;
  width: 140px;
}
#myDiv img
{
  max-width: 100%;
  max-height: 100%;
  margin: auto;
  display: block;
}

jQuery 部分：

shell
var logoHeight = $('#myDiv img').height();
    if (logoHeight < 104) {
        var margintop = (104 - logoHeight) / 2;
        $('#myDiv img').css('margin-top', margintop);
    }

有两种方法可以使图像具有响应能力。

1. 当图像是背景图像时。

   shell
   #container{
       width: 300px;
       height: 300px;
       background-image: url(https://images.fonearena.com/blog/wp-content/uploads/2013/11/Lenovo-p780-camera-sample-10.jpg);
       background-size: cover;
       background-repeat: no-repeat;
       background-position: center;
   }
   
   <div id="container"><div>

   在这里运行它

   但是应该使用标签来放置图像，因为它比SEOimg更好，因为您可以在标签中写入关键字。所以在这里你可以使图像响应。background-image``alt``img

2. 当图像位于img标签中时。

   shell
   #container{
       max-width: 400px;
       overflow: hidden;
   }
   img{
       width: 100%;
       object-fit: contain;
   }
   
   <div id="container">
       <img src="https://images.fonearena.com/blog/wp-content/uploads/2013/11/Lenovo-p780-camera-sample-10.jpg" alt="your_keyword"/>
   <div>

   在这里运行它