Question

在图像放置方面需要一些帮助。我希望我的图片浮动到右下角，以防图像大小与窗口内部宽度或高度不匹配，请在不更改宽高比的情况下用上述图像填充窗口。为了更全面地说明这一点，我添加了一张图片：Explanation。

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

在CSS中为“ img”使用width：100％和height：100％（问题是图像纵横比根据窗口大小而变化）
在CSS中使用高度：100％作为“ img”，并使用JavaScript更改“ img” -margin-left（将左边距设置为window.innerWidth-document.getElementById（“ image.png”）。width像素）以进行剪切不利的一面（问题是尺寸调整后的图像有时缺乏宽度开始且无法获得适当的边距值）

试图遍历“ 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

上找到

动态图像放置和裁剪

1 个答案: