CSS 缩放图像并填充容器答案

【问题标题】：CSS scale an image and fill the containerCSS 缩放图像并填充容器
【发布时间】：2018-03-29 00:34:17
【问题描述】：

图片尺寸有3种情况：

image width > image height
image width < image height
image width == image height

我需要使用img 来显示div 内的图像。

<div class="container">
    ...
    <img class="scale-and-fill" src="..." />
    ...
</div>

如何：

如果图像的两个尺寸都小于容器，则在保持比例的同时将其放大，并让较短的尺寸与容器的尺寸相匹配。
如果图像的两个尺寸都大于容器，则在保持比例的同时将其缩小，让较短的尺寸与容器的尺寸相匹配。
如果图像的一个尺寸大于容器，而另一个尺寸小于容器，则放大较小的尺寸以匹配容器尺寸，并裁剪溢出图像的剩余部分。

在下面的 CSS 类中应该输入什么？

.container {
   ...
}
.scale-and-fill {
   ...
}

更新

包括截图以清楚地说明我的问题。

【问题讨论】：

如果将其缩放到超过其原始大小，则无法保持该比例。
我的意思是宽高比。
只能维护一个height或width
是 img 的委托人吗？设置 div 背景还不够？在这种情况下，您可以使用封面 - 包含属性
如果你根本不能使用 javascript，它看起来很难。因为我不认为在 css 中你可以检查 img 的纵横比。

标签： jquery html image css

【解决方案1】：

你需要在不同的情况下应用两个不同的类：

.scale-and-fill1 {
  width: 100%;
  height: auto;
  position: relative;
}

.scale-and-fill2 {
  width: auto;
  height: 100%;
  position: relative;
}

.container {
  overflow: hidden;
}

这应该保持比例，但要选择正确的课程，您应该使用一点 javascript。

我会添加这个 jquery javascript:

$(document).ready(
  $('.container img').each(function() {
    var ratio = $(this).width() / $(this).height();
    if (ratio > 1) {
      $(this).attr('çlass','.scale-and-fill2');
      $(this).attr('left',$('. container').width()/2 - $(this).width() / 2);
    } else {
      $(this).attr('çlass','.scale-and-fill1');
      $(this).attr('top',$('. container').height()/2 - $(this).height() / 2);
    }
  });
)

【讨论】：

是的，容器是固定大小的，例如width: 100px; height: 100px;
当我回答时，你没有在你的问题中提到任何中心对齐。我更新了答案，即使在问题上也请写出来，作为参考的图像可能不清楚

【解决方案2】：

你可以设置.container的宽/高，f.e.:

.container {
width: 300px;
height: 250px;
}

并设置图片的样式：

.scale-and-fill {
display: block;
width: 100%;
max-width: 100%;
max-height: 100%;
}

【讨论】：

好吧，你到底想得到什么？你能举个例子吗？
我将尝试创建一些屏幕截图来说明我的问题。

【解决方案3】：

你不能只用 css 做到这一点。你描述的问题有这种形式：

IF (image-dimensions) THEN (css-rule)

为此，您需要编写脚本。

【讨论】：

【解决方案4】：

你最好的选择是缩小规模。让我们假设高度不合适。如果是这种情况，以下内容会有所帮助

.container {
   width: 250px; /* Adjust as needed */
   height: 200px; /* Must be a litle smaller than the images original height */
   overflow: hidden;
}

.scale-and-fill {
   width: 100%;
   height: auto; /* The image will now fit since 
  .container is smaller than the original size */
}

在webdesignsharepoint查看这个关于图像控制的教程

【讨论】：

【解决方案5】：

使用您选择的纵横比。 16/9 用于高清显示器。

.container {
  width: 300px;
  height: 250px;
}

.scale-and-fill {
  width: 100%;
  height: unset;
  object-fit: cover;
}

@media (max-aspect-ratio: 16/9) {
  .scale-and-fill {
    width: unset;
    height: 100%;
  }
}

【讨论】：