我看到很多人都建议对象适合，这是一个不错的选择。但是，如果您也想在较旧的浏览器中工作，则还有另一种方法可以轻松实现。

请在这里签出我的答案： IE和Edge针对对象适配的修复：封面；

它很简单。我采取的方法是将图像绝对放置在容器内 ，然后使用组合将其放置在中心位置：

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

一旦它到达中心，我就给图像，

// For vertical blocks (i.e., where height is greater than width)
height: 100%;
width: auto;

// For Horizontal blocks (i.e., where width is greater than height)
height: auto;
width: 100%;

这使图像获得Object-fit：cover的效果。

这是上述逻辑的演示。

https://jsfiddle.net/furqan_694/s3xLe1gp/

此逻辑适用于所有浏览器。

The solution is easy with a bit of maths...

Just put the image in a div and then in the HTML file where you specify the image. Set the width and height values in percentages using the pixel values of the image to calculate the exact ratio of width to height.

For example, say you have an image that has a width of 200 pixels and a height of 160 pixels. You can safely say that the width value will be 100%, because it is the larger value. To then calculate the height value you simply divide the height by the width which gives the percentage value of 80%. In the code it will look something like this...

<div class="image_holder_div">
    <img src="some_pic.png" width="100%" height="80%">
</div>

Or you can simply use:

background-position:center;
background-size:cover;

Now the image will take all the space of the div.

Check my answer, Make an image responsive - simplest way -

img{
    width: 100%;
    max-width: 800px;
}

All the provided answers, including the accepted one, work only under the assumption that the div wrapper is of a fixed size. So this is how to do it whatever the size of the div wrapper is and this is very useful if you develop a responsive page:

Write these declarations inside your DIV selector:

width: 8.33% /* Or whatever percentage you want your div to take */
max-height: anyValueYouWant /* (In px or %) */

Then put these declarations inside your IMG selector:

width: "100%" /* Obligatory */
max-height: anyValueYouWant /* (In px or %) */

VERY IMPORTANT:

The value of maxHeight must be the same for both the DIV and IMG selectors.

I centered and scaled proportionally an image inside a hyperlink both horizontally and vertically this way:

#link {
    border: 1px solid blue;
    display: table-cell;
    height: 100px;
    vertical-align: middle;
    width: 100px;
}
#link img {
    border: 1px solid red;
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-height: 60px;
    max-width: 60px;
}

It was tested in Internet Explorer, Firefox, and Safari.

More information about centering is here.

A simple solution (4-step fix!!) that seems to work for me, is below. The example uses the width to determine the overall size, but you can also flip it to use the height instead.

1. Apply CSS styling to the image container (for example, <img>)
2. Set the width property to the dimension you want
   • For dimensions, use % for relative size, or autoscaling (based on image container or display)
   • Use px (or other) for a static, or set dimension
3. Set the height property to automatically adjust, based on the width
4. ENJOY!

For example,

<img style="width:100%; height:auto;"
    src="https://googledrive.com/host/0BwDx0R31u6sYY1hPWnZrencxb1k/thanksgiving.png"
/>

一个美丽的hack。

您可以通过两种方式使图像响应。

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

#container{
    width: 300px;
    height: 300px;
    background-image: url(http://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>

在这里运行

2. 图片在img标签中时。

#container{
    max-width: 400px;
    overflow: hidden;
}
img{
    width: 100%;
    object-fit: contain;
}

<div id="container">
   <img src="http://images.fonearena.com/blog/wp-content/uploads/2013/11/Lenovo-p780-camera-sample-10.jpg" alt="your_keyword"/>
<div>

在这里运行

I fixed this problem using the following code:

<div class="container"><img src="image_url" /></div>

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

.container img {
    object-fit: cover;
    object-position: top;
    display: block;
    height: 100%;
    width: 100%;
}

简单点！

给容器一个固定的 height，然后在其中的img标签上设置width和max-height。

<div style="height: 250px">
     <img src="..." alt=" " style="width: 100%;max-height: 100%" />
</div>

区别在于您将设置width为100％，而不是max-width。

我有更好的解决方案，不需要任何JavaScript。它反应灵敏，我经常使用它。您通常需要将具有任何纵横比的图像拟合到具有指定纵横比的容器元素。必须使整个事情全面响应。

/* For this demo only */
.container {
  max-width: 300px;
  margin: 0 auto;
}
.img-frame {
  box-shadow: 3px 3px 6px rgba(0, 0, 0, .15);
  background: #ee0;
  margin: 20px auto;
}

/* This is for responsive container with specified aspect ratio */
.aspect-ratio {
  position: relative;
}
.aspect-ratio-1-1 {
  padding-bottom: 100%;
}
.aspect-ratio-4-3 {
  padding-bottom: 75%;
}
.aspect-ratio-16-9 {
  padding-bottom: 56.25%;
}

/* This is the key part - position and fit the image to the container */
.fit-img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  max-width: 80%;
  max-height: 90%
}
.fit-img-bottom {
  top: auto;
}
.fit-img-tight {
  max-width: 100%;
  max-height: 100%
}

<div class="container">

  <div class="aspect-ratio aspect-ratio-1-1 img-frame">
    <img src="//placehold.it/400x300" class="fit-img" alt="sample">
  </div>

  <div class="aspect-ratio aspect-ratio-4-3 img-frame">
    <img src="//placehold.it/400x300" class="fit-img fit-img-tight" alt="sample">
  </div>

  <div class="aspect-ratio aspect-ratio-16-9 img-frame">
    <img src="//placehold.it/400x400" class="fit-img" alt="sample">
  </div>

  
  <div class="aspect-ratio aspect-ratio-16-9 img-frame">
    <img src="//placehold.it/300x400" class="fit-img fit-img-bottom" alt="sample">
  </div>
  
</div>

您可以独立设置最大宽度和最大高度。图像将遵循最小的图像（取决于图像的值和纵横比）。您还可以将图像设置为所需的对齐方式（例如，对于无穷大白色背景上的产品图片，可以轻松地将其定位在底部中央）。

以下代码改编自先前的答案，并由我使用名为的图片进行了测试storm.jpg。

这是显示图像的简单页面的完整HTML代码。这工作完美，并由我通过www.resizemybrowser.com进行了测试。将CSS代码放在HTML代码的顶部，在标题下面。将图片代码放在您想要的图片的任何位置。

<html>
    <head>
        <style type="text/css">
            #myDiv
            {
                  height: auto;
                  width: auto;
            }
            #myDiv img
            {
                max-width: 100%;
                max-height: 100%;
                margin: auto;
                display: block;
            }
        </style>
    </head>

    <body>
        <div id="myDiv">
            <img src="images/storm.jpg">
        </div>
    </body>
</html>

将图像所需的高度和宽度提供给包含<img>标签的div。不要忘记在适当的样式标签中指定高度/宽度。

在<img>标记中，将max-height和设置max-width为100％。

<div style="height:750px; width:700px;">
    <img alt="That Image" style="max-height:100%; max-width:100%;" src="">
</div>

正确后，可以在适当的类中添加详细信息。

以下内容非常适合我：

img{
   height: 99999px;
   object-fit:contain;
   max-height: 100%;
   max-width: 100%;    
   display: block;
   margin: auto auto;
}

该解决方案不会拉伸图像并填充整个容器，但是会剪切一些图像。

HTML：

 <div><img src="/images/image.png"></div>

CSS：

div {
    width: 100%;
    height: 10em;
    overflow: hidden;

img {
    min-width: 100%;
    min-height: 100%;
}

我刚刚发布了一个jQuery插件，它通过许多选项完全满足您的需求：

https://github.com/GestiXi/image-scale

用法：

的HTML

<div class="image-container">
    <img class="scale" data-scale="best-fit-down" data-align="center" src="img/example.jpg">
</div>

的JavaScript

$(function() {
    $("img.scale").imageScale();
});

请勿对图片标签应用明确的宽度或高度。相反，给它：

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

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

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

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="http://i.stack.imgur.com/xkF9Q.jpg">
</div>

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

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

您可以将图像设置为div的背景，然后使用CSS background-size属性：

background-size: cover;

It will "Scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area" -- W3Schools