我正在处理图像，但遇到宽高比问题。

<img src="big_image.jpg" width="900" height="600" alt="" />

如您所见，height并且width已经指定。我为图像添加了CSS规则：

img {
  max-width:500px;
}

但是big_image.jpg，我收到width=500和height=600。如何设置图像以调整尺寸，同时保持其纵横比。

img {
  display: block;
  max-width:230px;
  max-height:95px;
  width: auto;
  height: auto;
}

<p>This image is originally 400x400 pixels, but should get resized by the CSS:</p>
<img width="400" height="400" src="http://i.stack.imgur.com/aEEkn.png">

如果对于指定区域太大，则会缩小图像（不利的一面是，不会放大图像）。

我一直在努力地解决这个问题，最终得出了一个简单的解决方案：

object-fit: cover;
width: 100%;
height: 250px;

您可以调整宽度和高度以适合您的需求，object-fit属性将为您进行裁剪。

干杯。

下面的解决方案将允许放大和缩小图像，具体取决于父盒的宽度。

所有图像都有一个宽度固定的父容器，仅用于演示目的。在生产中，这将是父盒的宽度。

最佳实践（2018）：

此解决方案告诉浏览器以最大可用宽度渲染图像，并将高度调整为该宽度的百分比。

.parent {
  width: 100px;
}

img {
  display: block;
  width: 100%;
  height: auto;
}

<p>This image is originally 400x400 pixels, but should get resized by the CSS:</p>
<div class="parent">
  <img width="400" height="400" src="https://placehold.it/400x400">
</div>

更好的解决方案：

使用更高级的解决方案，您将能够裁剪图像而不管其尺寸如何，并添加背景颜色以补偿裁剪。

.parent {
  width: 100px;
}

.container {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  overflow: hidden;
  padding: 34.37% 0 0 0; /* 34.37% = 100 / (w / h) = 100 / (640 / 220) */
}

.container img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

<p>This image is originally 640x220, but should get resized by the CSS:</p>
<div class="parent">
  <div class="container">
    <img width="640" height="220" src="https://placehold.it/640x220">
  </div>
</div>

对于指定填充的行，您需要计算图像的长宽比，例如：

640px (w) = 100%
220px (h) = ?

640/220 = 2.909
100/2.909 = 34.37%

因此，顶部填充= 34.37％。

background-size属性仅是ie> = 9，但是如果您满意，可以将div与background-imageand set一起使用background-size: contain：

div.image{
    background-image: url("your/url/here");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

现在，您可以将div大小设置为所需的任何值，并且图像不仅会保持其纵横比，而且还将在div中垂直和水平集中。只是不要忘了在CSS上设置大小，因为div在标签本身上没有width / height属性。

此方法与setecs答案不同，使用setecs答案，图像区域将是恒定的并由您定义（根据div大小和图像长宽比，水平或垂直留出空白空间），而setecs答案将为您提供一个精确地缩放图像的大小（无空白）。

编辑：根据MDN背景大小文档，您可以使用专有的过滤器声明在IE8中模拟background-size属性：

尽管Internet Explorer 8不支持background-size属性，但可以使用非标准的-ms-filter函数来仿真其某些功能：

-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='path_relative_to_the_HTML_file', sizingMethod='scale')";

与此处的某些答案非常相似，但就我而言，我的图像有时更高，有时更大。

这种样式就像一种魅力一样，可以确保所有图像都使用所有可用空间，保持比例而不裁切：

.img {
   object-fit: contain;
   max-width: 100%;
   max-height: 100%;
   width: auto;
   height: auto;
}

删除“高度”属性。

<img src="big_image.jpg" width="900" alt=""/>

通过同时指定两者，可以更改图像的纵横比。仅设置一个将调整大小，但保留宽高比。

（可选）限制尺寸过大：

<img src="big_image.jpg" width="900" alt="" style="max-width:500px; height:auto; max-height:600px;"/>

只需将其添加到您的CSS中，它将在保持原始比例的情况下自动缩小和扩展。

img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}

有保存用于与图像的纵横比没有标准的方式width，height并max-width指定到一起。

因此，我们被迫在加载图像时指定width并height防止页面“跳转”，或者使用max-width而不指定图像尺寸。

仅指定width（不带height）通常没有多大意义，但是您可以尝试height通过IMG {height: auto; }在样式表中添加类似规则来覆盖HTML属性。

另请参阅相关的Firefox 错误392261。

这是一个解决方案：

img {
   width: 100%;
   height: auto;
   object-fit: cover;
}

这样可以确保图像始终覆盖整个父对象（上下缩放），并保持相同的宽高比。

将图像容器标签的CSS类设置为image-class：

<div class="image-full"></div>

并将其添加到您的CSS样式表中。

.image-full {
    background: url(...some image...) no-repeat;
    background-size: cover;
    background-position: center center;
}

要在保持图像响应性的同时仍使图像具有一定的纵横比，可以执行以下操作：

HTML：

<div class="ratio2-1">
   <img src="../image.png" alt="image">
</div>

和SCSS：

.ratio2-1 {
  overflow: hidden;
  position: relative;

  &:before {
    content: '';
    display: block;
    padding-top: 50%; // ratio 2:1
  }

  img {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
  }
}

无论作者上传的图像大小如何，都可以使用它来强制执行一定的宽高比。

感谢@Kseso，网址为 http://codepen.io/Kseso/pen/bfdhg。检查此URL以获取更多比率和有效示例。

要强制使用适合确切大小的图像，您无需编写太多代码。很简单

img{
    width: 200px;
    height: auto;
    object-fit: contain; /* Fit logo in the image size */
        -o-object-fit: contain; /* Fit logo fro opera browser */
    object-position: top; /* Set logo position */
        -o-object-position: top; /* Logo position for opera browser */
    }

<img src="http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png" alt="Logo">

https://jsfiddle.net/sot2qgj6/3/

如果您要放置宽度固定百分比的图像，而不是宽度固定像素的像素，这是答案。

这在处理不同尺寸的屏幕时很有用。

窍门是

1. 使用padding-top设置从宽度的高度。
2. 使用position: absolute把图像中的填充空间。
3. 使用max-height and max-width以确保图像不会在父元素。
4. 使用display:block and margin: auto居中图像。

我也评论了小提琴里面的大多数技巧。

我还发现了实现此目标的其他方法。HTML中将没有真实的图像，因此当我需要HTML中的“ img”元素时，我个人会提出最佳答案。

通过使用背景 http://jsfiddle.net/4660s79h/2/实现简单的CSS

顶部带有单词的背景图片 http://jsfiddle.net/4660s79h/1/

使用位置绝对值的概念来自此处 http://www.w3schools.com/howto/howto_css_aspect_ratio.asp

您可以使用此：

img { 
    width: 500px; 
    height: 600px; 
    object-fit: contain; 
    position: relative; 
    top: 50%; 
    transform: translateY(-50%); 
}

您可以这样创建一个div：

<div class="image" style="background-image:url('/to/your/image')"></div>

并使用以下CSS对其进行样式设置：

height: 100%;
width: 100%;
background-position: center center;
background-repeat: no-repeat;
background-size: contain; // this can also be cover

如果对于指定区域太大，则会缩小图像（不利的一面是，不会放大图像）。

setec的解决方案适用于自动模式下的“缩小以适合”。但是，要以最佳方式扩展以适合“自动”模式，您需要首先将接收到的图像放入一个临时ID，检查它的高度或宽度是否可以扩展（取决于其纵横比v / s的纵横比）。您的显示块），

$(".temp_image").attr("src","str.jpg" ).load(function() { 
    // callback to get actual size of received image 

    // define to expand image in Height 
    if(($(".temp_image").height() / $(".temp_image").width()) > display_aspect_ratio ) {
        $(".image").css('height', max_height_of_box);
        $(".image").css('width',' auto');
    } else { 
        // define to expand image in Width
        $(".image").css('width' ,max_width_of_box);
        $(".image").css('height','auto');
    }
    //Finally put the image to Completely Fill the display area while maintaining aspect ratio.
    $(".image").attr("src","str.jpg");
});

当收到的图像小于显示框时，此方法很有用。您必须将它们以原始的小尺寸而不是其扩展版本的格式保存在服务器上，以填满更大的显示框，以节省尺寸和带宽。

我建议采用响应式方法，最佳做法是使用视口单位和最小/最大属性，如下所示：

img{
  display: block;
  width: 12vw;
  height:12vw;
  max-width:100%;
  min-width:100px;
  min-height:100px;
  object-fit:contain;
}

使用伪元素进行垂直对齐怎么样？这个较少的代码是用于轮播的，但是我想它适用于每个固定大小的容器。它将保持宽高比，并在最短尺寸的顶部/底部或左侧/左侧插入@灰色深条。同时，图像在水平方向上通过文本对齐居中，在垂直方向上通过伪元素居中。

    > li {
      float: left;
      overflow: hidden;
      background-color: @gray-dark;
      text-align: center;

      > a img,
      > img {
        display: inline-block;
        max-height: 100%;
        max-width: 100%;
        width: auto;
        height: auto;
        margin: auto;
        text-align: center;
      }

      // Add pseudo element for vertical alignment of inline (img)
      &:before {
        content: "";
        height: 100%;
        display: inline-block;
        vertical-align: middle;
      }
    }

全屏演示：

img[data-attribute] {height: 100vh;}

请记住，如果视口高度大于图像，则图像会自然地相对于差异降低。

我认为，最后，这是最好的解决方案，简单易行：

img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}