将图片调整大小以完美适应具有可变尺寸的 div

Question

我需要正确地缩放一个位于

内的图像，使得图像保持其比例，并且宽度等于100%或高度等于100%。基本上，图像在保持长宽比的情况下尽可能占据

中的空间。请记住，

的宽度和高度可能会改变。

我对此有直觉，但没有代码...

引用块： 思路是使用JavaScript/jQuery获取

的比率（高度/宽度）=> 比率A，然后获取图像的比率（高度/宽度）=> 比率B

注意：如果比率>1，则我们有一张纵向图像或

；如果比率<1，则我们有一张横向图像或

如果比率A<比率B，则我们希望将图像的高度设置为100%; 如果比率A>比率B，则我们希望将图像的宽度设置为100%;

因此，如果我们有一个响应式的

，则宽度或高度=100%将动态更改。

这是否可行？

- Jackymamouth

---

https://www.sitepoint.com/using-css-object-fit-object-position-properties/ - Paulie_D

如果你想使用jquery，有一些插件可供选择。https://github.com/karacas/imgLiquid https://github.com/periplox/jquery.imagefit https://github.com/gestixi/image-scale - Kunsang

@Paulie_D 没想到CSS有这么简单明了的解决方案...谢谢 =) - Jackymamouth

它必须是<img>标签吗？还是可以使用CSS背景图像？ - Daniel Diekmeier

@DanielDiekmeier 必须是 <img> 标签。 - Jackymamouth

Answer 1

这里有两个（CSS）解决方案：

1. http://codepen.io/cryptcslaughtr/pen/LNoMBY

.container {
  width: 100px;
  height: 200px;
  border: 1px solid #333;
  background: url("https://3.bp.blogspot.com/-W__wiaHUjwI/Vt3Grd8df0I/AAAAAAAAA78/7xqUNj8ujtY/s1600/image02.png") no-repeat left top / contain;
}

<div class="container"></div>

http://codepen.io/cryptcslaughtr/pen/qZGLvE

.container {
  width: 250px;
  height: 130px;
  border: 1px solid #333;
}
.container img {
  max-width: 100%;
  max-height: 100%;
}

<div class="container">
  <img src="https://3.bp.blogspot.com/-W__wiaHUjwI/Vt3Grd8df0I/AAAAAAAAA78/7xqUNj8ujtY/s1600/image02.png" alt="Put your image" />
</div>

- Awol

---

你的第一段CSS代码可以工作，但我需要保留<im>标签。如果图像小于div，则第二段CSS代码无法工作。 - Jackymamouth

Answer 2

如果您需要用于SEO/alt/ARIA等的img标签，这里是修改后的Cryptc_Slaughtr解决方案的组合：

.container {
  width: 250px;
  height: 200px;
  border: 1px solid #333;
  background: url("https://3.bp.blogspot.com/-W__wiaHUjwI/Vt3Grd8df0I/AAAAAAAAA78/7xqUNj8ujtY/s1600/image02.png") no-repeat left top / contain;
}
.container img {
  width:100%;
  height: 100%;
  opacity:0;
}
  

<div class="container"><img src="https://3.bp.blogspot.com/-W__wiaHUjwI/Vt3Grd8df0I/AAAAAAAAA78/7xqUNj8ujtY/s1600/image02.png" alt="Put your image" title="Put your image" /></div>

- Yuri Gor

Answer 3

您可以将父级 div 设置为相对定位，并且设置 overflow 属性为 hidden。然后执行以下操作：

.bg-img {
   bottom: -1000px;
   left: -1000px;
   margin: auto;
   min-height: 100%;
   min-width: 100%;
   position: absolute;
   right: -1000px;
   top: -1000px;
}

这将确保无论容器的大小如何，它都将始终覆盖100％。这也将包含图像比例。

- TSlegaitis

---

Paulie_D提供了一种更简单的CSS解决方案，我之前完全没有意识到... https://www.sitepoint.com/using-css-object-fit-object-position-properties/ - Jackymamouth

你有检查过浏览器对此的支持吗？http://caniuse.com/#search=object-fit object-fit 在任何IE浏览器上都不受支持。 - TSlegaitis