动态图像放置和裁剪

Question

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

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

在 CSS 中对 "img" 使用 width:100% 和 height:100%（问题是图像宽高比会根据 window 大小而变化）
对 CSS 中的 "img" 使用 height:100% 并更改 "img" margin-left 为 JavaScript( 设置左边距等于 window.innerWidth - document.getElementById("image.png").width pixels) 切掉其中一侧（问题是调整后的图像有时缺乏宽度开始并且无法获得正确的边距值）

运行尝试了 "Whosebug" 中的许多类似帖子，但找不到有帮助的帖子。

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

找到现场演示

动态图像放置和裁剪

Dynamic image placement and cropping

html

image

crop