Question

我需要正确缩放 div 内的图像，以便图像保持其比例，以便宽度等于100％或高度等于100％。 /> 所以基本上图像在 div 中占用尽可能多的空间，同时保持纵横比。请记住，div可以改变宽度和高度。

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

想法是获得div的比率（高度/宽度）   的JavaScript / 的jQuery 。 =＆GT;比率A然后得到图像的比率（高度/宽度）。 =＆GT;比率B

注意：如果比率＆gt; 1，然后我们有一个肖像图像或div   如果比率＆lt; 1，然后我们有一个风景图片或div。

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

因此，如果我们有响应式 div ，则宽度或高度= 100％将动态更改。

这可能吗？

Answer 1

以下是2个（css）解决方案：

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>

Answer 2

您可以简单地将父div设置为相对位置，并将隐藏溢出。然后这样做：

->groupByField('photo_id')
->addExpressionFieldToSelect("max_step_id", 'MAX({{step_id}})', 'step_id')

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

Answer 3

如果您需要针对SEO / alt / ARIA / img标签，请将修改后的Cryptc_Slaughtr解决方案合并为一个：

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

调整图像大小以完全适合具有可变尺寸的div

3 个答案: