动态图像放置和裁剪

Question

需要一些图片放置方面的帮助。我希望我的图片浮动到右下角，如果图像大小与窗口内部宽度或高度不匹配，请在不改变宽高比的情况下用所述图像填充窗口。为了更彻底地解释它，我正在添加一张图片：Explanation。

试过不同的方法，但都失败了：

• 在CSS中使用宽度：100％和高度：100％用于“img”（问题是图像宽高比根据窗口大小而变化）
• 使用高度：100％用于CSS中的“img”并使用JavaScript更改“img”margin-left（设置左边距等于window.innerWidth - document.getElementById（“image.png”）。width pixels）来切割其中一个关闭（问题是调整大小的图像有时缺少宽度而无法获得正确的边距值）

尝试在“stackoverflow”中运行很多类似的帖子，但找不到有帮助的帖子。

Answer 1

你可以使用CSS属性object-fit和object-position。假设您有以下布局：

<div class="container">
  <img class="img" src="http://some-img"></img>
</div>

对于此示例，您应该使用以下样式：

.img {
   width: 100%;
   height: 100%;
   object-fit: cover; /* save your aspect ratio */
   object-position: right bottom; /* put your image to the right corner */
}

现场演示可以在CodePen找到