问题标签 [object-fit]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
css - Object-fit 不覆盖整个包含区域
图像没有完全覆盖包含区域（您可以看到底部的小青色条。）
这是为什么？我该怎么做才能使图像完全覆盖 div？
html - 将多个图像放入单个表格单元格中
我在调整图像大小时遇到了一些问题。我有我用 Photoshop 创建的图像。它们都是PNG，并已对其进行裁剪以删除尽可能多的空白，但一张图像向右移动了一点。由于我使用的是表格，因此无法添加填充或边距以将其移动到左侧。我正在使用 object-fit 方法将图像调整到正确的大小并适合表格，但它似乎不适合我想要的方式。下面是我的意思的图像：
代码：index.html：
注意：我故意让底部的图像丢失，因为我还没有添加图像。
css - 如何对 16:9 图像使用对象拟合？
我试图弄清楚如何object-fit正确缩放 16:9 垂直图像。
我几乎没有运气尝试过任何事情！
https://jsfiddle.net/pdocys3j/
预期结果（不使用object-fit：
我希望我可以object-fit改用。对这种方法的想法？
css - 响应式方形 img（填充底部：100%）在 iOS 上不起作用？
我的博客中有一个“相关帖子”网格，并尝试了padding-bottom: 100%使每个帖子的图像响应正方形的技巧。
它适用于桌面，但在移动 iOS 上，图像的高度延伸到视口的 100%。在三星手机上工作正常。
我哪里错了？我检查了Caniuseobject-fit上的属性，它在很大程度上得到了支持。在 Safari、Chrome、Edge 和 Firefox 上试过：同样奇怪的行为。
提前感谢您的宝贵帮助！
这是标记：
和 SASS：
css - 使用 CSS 调整图像的剪切部分的大小
我试图弄清楚，是否有任何方法可以使用 css 调整图像的剪切部分的大小。在最受期待的版本中，以这种方式调整大小的图像应该保持强加的纵横比。
我正在使用剪辑路径，尝试两种方法（svg & inset()），以及解决对象位置和对象拟合参数，不幸的是我无法达到预期的结果:(
这是我的实际代码。我需要剪切的图像适合图片元素的大小（图片的背景应该被剪切的图像覆盖）
案例研究 https://imgur.com/DR9Lrng
html - 为什么对象适合：包含/覆盖；没有效果？
为什么object-fit: contain/cover;没有效果？
css - 偏离中心图像的 CSS 定位
我需要让手机居中。以下是模型中包含的内容：
但是，这就是我得到的：
如何定位/居中移动图像，以便阴影不会将手机推到右侧？我正在使用display: flex;
HTML
CSS
html - 对象匹配是否会破坏 Chrome 中的某些图像纵横比？
我在包装 div 中的一些 IMG 标签上使用 object-fit:cover 来尝试用图像填充 div。我注意到有些文件的纵横比似乎被拉伸了，而另一些文件的显示则正确。这特别发生在 Chrome 中（我在 83 版上观察它）。
它在 Edge（和 Firefox）上运行良好：
我怀疑这是 Chrome 中的渲染错误，它可能是由具有 EXIF 旋转元数据的图像触发的。
这是一个演示 - https://codepen.io/mark_keo/pen/MWKXggz
那么是 CSS/HTML 中的错误还是浏览器错误？
css - 如何使固定位置元素转义 3D 转换元素？
我有一个应用了 CSS 3D 变换的元素。在该元素内部是一个我想用作背景的视频，使用position: fixed和object-fit: cover。在不改变 DOM 的形状和不从容器中移除 3D 变换的情况下，如何确保固定位置的视频元素延伸到整个视口，而不是在变换后的父对象的边缘被截断？