如何使img标记适合css网格单元内的缩放而不适合对象？
这是一个vue组件，其父级以2 x 4偶数布局渲染其中8个组件。图像大于其网格容器。我想它收缩，以适应容器，同时保持其纵横比。但是，对象拟合对img标记没有影响，图像被渲染为全尺寸，从而大幅扭曲网格并扰乱我的布局。
当img标记被注释掉时，它的父div格式为正确的大小并填充它的网格容器。
<template>
<div class="camera-wrapper">
<img class="camera" src="../assets/tsLogo.png" />
</div>
</template>
<style scoped>
.camera-wrapper {
position: relative;
border: 1px solid black;
width: 100%;
height: 100%;
overflow: hidden;
}
.camera {
width: 100%;
height: 100%;
object-fit: cover;
}
</style>
共有1个答案
是否可以在div上切换到背景图像并使用background size:contain而不是img元素？
很抱歉，我不能提供一个片段，因为我目前只能使用触摸设备
-
如何设置视图以在地图框或传单中查看地图上的所有标记？就像谷歌地图API对？ 例如：
-
问题内容： 我正在尝试缩小美国地图。要么是我的SVG，要么是手动的。 这是我的代码中最简单的： 我已经尝试过类似的东西： 但是每次我在路径变量中添加任何内容时，我都会从D3的内部收到NAN错误。谢谢你的帮助！ 问题答案： 关键问题是您的数据 已经被 投影。D3 geoProjections使用未投影的数据或成对的数据。WGS84基准中的数据。实质上，d3 geoProjection会采用球面坐标并
-
问题内容： 是否有仅css的解决方案将图像缩放到边框（保持纵横比）？如果图像大于容器，则此方法有效： 问题答案： 不，没有唯一的CSS双向方式可以做到这一点。您可以添加 对于一个元素，使其始终具有100％的宽度，并自动将其高度缩放为长宽比， 或 反之： 始终缩放到最大高度和相对宽度。为此，您需要确定纵横比是高于还是低于容器，而CSS无法做到这一点。 原因是CSS不知道页面的外观。它会预先设置规则，
-
问题内容： 在JavaScript / jQuery中，如何缩放固定宽度Div内的可变长度文本行，以使一行始终适合Div内（作为一行）？ 谢谢。 问题答案： 这有点骇人听闻，但可以满足您的要求。 将其放置在页面底部，该位置将不会移动页面上的其他元素。 然后执行以下操作：
-
我目前有一个datatable由于某种原因不能放入div，有没有人知道如何“挤压”它，这样它就可以很好地放入我的div中&不需要滚动 代码：
-
问题内容： 这是给我麻烦的代码。 如果我用标签注释掉行，则框架显示为正确的宽度。但是，添加标签似乎将框架缩小到标签的大小。有办法防止这种情况发生吗？ 问题答案： 默认情况下，以及 缩小或放大一个小部件，以适应其内容 ，这是你想要什么的时候99.9％。描述此功能的术语是“几何传播”。还有一个命令以打开几何传播或使用时关闭（和类似的一个为）。 由于您使用的是pack，因此语法为： 或也许，取决于您实际