Question

我有一个固定高度的div，可变宽度，以及溢出隐藏：

.img-container {
  height: 400px;
  width: 50%;
  overflow: hidden;
}

尺寸可变的图像：比容器更小，更宽，更高。

我需要的是：

在必要时拉伸图像（垂直或水平）以填充容器
拉伸时，保持纵横比
当图像更大时（溢出隐藏）集中图像（垂直和水平）

我在这里创建了一些示例：https://jsfiddle.net/sh6f5nfh/

＆＃13;

.img-container {
  height: 200px;
  width: 50%;
  overflow: hidden;
  background: yellow;
  margin-bottom: 5px;
}

＆＃13;

<div class='img-container'>
  <img src="http://placehold.it/350x150" />
</div>

<div class='img-container'>
  <img src="http://placehold.it/100x220" />
</div>

<div class='img-container'>
  <img src="http://placehold.it/70x50" />
</div>

<div class='img-container'>
  <img src="http://placehold.it/50x70" />
</div>

＆＃13;

修改

当图像宽于容器时，此解决方案解决了问题：https://stackoverflow.com/a/3302072/740394。但是有些案例缺少回答这个问题:(例如：图像较小;宽度相同但较短;图像较高; ......）

Answer 1

就个人而言，我会采用背景图像方法。主要是因为你有令人难以置信的＆＃34;背景大小：封面＆＃34;功能。

＆＃13;

.img-container {
  height: 200px;
  width: 50%;
  overflow: hidden;
  margin-bottom: 5px;

  background-color: yellow;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
}

.img-cover {
  height: 200px;
  width: 50%;
  overflow: hidden;
  margin-bottom: 5px;

  background-color: yellow;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

＆＃13;

<div class='img-container' style='background-image:url(http://placehold.it/350x150)'></div>
<div class='img-container' style='background-image:url(http://placehold.it/100x220)'></div>
<div class='img-container' style='background-image:url(http://placehold.it/70x50)'></div>
<div class='img-container' style='background-image:url(http://placehold.it/50x70)'></div>

<div class='img-cover' style='background-image:url(http://placehold.it/350x150)'></div>
<div class='img-cover' style='background-image:url(http://placehold.it/100x220)'></div>
<div class='img-cover' style='background-image:url(http://placehold.it/70x50)'></div>
<div class='img-cover' style='background-image:url(http://placehold.it/50x70)'></div>

＆＃13;

有关详细信息：http://www.w3schools.com/cssref/css3_pr_background-size.asp

Answer 2

您可以使用object-fit: contain;注意，目前的IE11和Edge不支持它，但在所有其他现代浏览器上运行良好，请参阅support tables。

如果您需要图像完全填充容器，请使用object-fit: cover;。

对于polyfill，请查看：Polyfill for CSS object-fit property。

＆＃13;

.img-container {
  height: 200px;
  width: 50%;
  overflow: hidden;
  background: yellow;
  margin-bottom: 5px;
}
.img-container img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* or cover */
}

＆＃13;

<div class='img-container'>
  <img src="http://placehold.it/350x150" />
</div>

<div class='img-container'>
  <img src="http://placehold.it/100x220" />
</div>

<div class='img-container'>
  <img src="http://placehold.it/70x50" />
</div>

<div class='img-container'>
  <img src="http://placehold.it/50x70" />
</div>

＆＃13;

Answer 3

这是你可以用css和img标签

获得的背景尺寸最接近的

<强> CSS

    .img-container{
      width: 300px;
      height: 300px;
      position: relative;
      overflow: hidden;
    }

    .img-container img{
      position: absolute;
      top: 50%;
      left: 50%;
      width: auto;
      height: auto;
      min-height: 100%;
      min-width: 100%;
      transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      -webkit-transform: translate(-50%, -50%);  
    }

<强> HTML

<div class="img-container">
  <img src="https://c1.staticflickr.com/7/6005/5927758528_a2060423e7_b.jpg">
</div>

在小提琴中你可以找到两种情况

https://jsfiddle.net/op4f8ad0/

如果较大且居中

3 个答案: