标签: object-fit
如何使用 Next.js 13 <Image> 的 objectFit？
在版本历史记录下的next/image 文档中，它对 v13.0.0 做了以下说明：
删除了布局、objectFit、objectPosition、lazyBoundary、lazyRoot 属性。
在用于填充文档状态的next/image 文档下，我们可以将对象设置为object-fit: "contain"或object-fit: "cover"。我无法使用以下代码设置对象适合覆盖：
<div className="relative">
<Image
src=""
alt=""
fill={true}
layout="fill"
object-fit="cover"
/>
</div>
如何使用 Next.js 13实现对象匹配？
推荐指数
解决办法
查看次数
在带有子元素的<div>上使用object-fit,包括<canvas>
我有一个外部容器,其大小和宽度可变.假设在这个容器里面,我有一个画布,我想尽可能多地增长,同时保持比例而不是裁剪.为此,我通常会使用object-fit: contain.
现在,假设不是仅仅使用画布,我有一个画布,旁边放置了另一个元素.
HTML:
<div class="outerContainer">
<canvas width="640" height="360"></canvas>
<div class="beside">
</div>
</div>
CSS:
.outerContainer {
display: flex;
border: 0.5em solid #444;
margin-bottom: 2em;
object-fit: contain;
}
.outerContainer canvas {
flex-grow: 1;
background: #77a;
}
/* This element has a fixed width, and should be whatever height the <canvas> is */
.outerContainer .beside {
flex-basis: 3em;
flex-grow: 0;
flex-shrink: 0;
background: #7a7;
}
在这种情况下,我想缩放整个outerContainer大小,就像我使用canvas一样.问题是object-fit实际上没有扩展元素......它会扩展其内容.这似乎不适用于普通块元素,导致如果有足够的宽度,内部画布可能会倾斜.
如果我添加object-fit: contain到canvas元素,它保持比例但仍使用全宽,这意味着.beside元素一直向右.这是用画布上的紫色背景可视化的.
我想要的是outerContainer使用画布内容进行缩放,以便.beside …
推荐指数
解决办法
查看次数
如何使用JavaScript在MS Edge中获取未知样式规则
我想使用object-fitCSS规则.
MSIE和MS Edge Browser不支持此功能.
虽然IE中有一些polyfill,但据我所知,在Edge中没有.
例如Jonathan Neal 的polyfill fitie与IE合作,但不在Edge中(至少不在我的机器上).这是因为fitie使用element.currentStyle并且element.runtimeStyle只有MS的JS对象,它们不再支持Edge浏览器.但如果我使用window.getComputedStyle(element).getPropertyValue('object-fit'),Edge什么也不返回.
那么如何object-fit在MS Edge浏览器中使用JavaScript 获取CSS规则规则的值？
img = document.getElementById('i');
s = self.getComputedStyle(img);
console.log('object-fit: ', s.getPropertyValue('object-fit'));
console.log('-ms-object-fit: ', s.getPropertyValue('-ms-object-fit'));div {
width: 400px;
height: 320px;
overflow: hidden;
}
#i {
display: block;
width: 100%;
height: 100%;
-ms-object-fit: cover;
object-fit: cover;
}
div {
box-sizing: border-box;
border: 1px solid gold;
}
div,
p {
font-family: sans-serif;
font-size: 20px;
width: 400px;
margin: 0 auto;
}<p>img: …推荐指数
解决办法
查看次数
object-fit：封面导致视频在 Safari 中跳转
我正在研究一个简单的示例，该示例利用object-fit: cover视频元素上的 CSS 属性，该视频元素包装在具有指定宽度和纵横比的 div 内。
超文本标记语言
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS Test</title>
</head>
<body>
<div id="container">
<video
autoplay
playsinline
muted
loop
src="https://media.istockphoto.com/videos/slow-motion-rock-on-the-midzor-peak-video-id1248422582"
></video>
</div>
</body>
</html>
CSS
* {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 1rem;
width: 100%;
height: 100%;
}
#container {
width: 500px;
overflow: hidden;
aspect-ratio: 1/1;
border: 1px solid red;
}
video {
width: …推荐指数
解决办法
查看次数
CSS object-fit cover 在 Mac 上的 Chrome 中拉伸特定图像
img {
width: 200px;
height: 150px;
object-fit: cover;
}<img src="https://res.cloudinary.com/wisdo/image/upload/v1589582065/mentored-sessions/New/Kim.jpg" />许多其他图像工作正常。在其他浏览器中，一切也按预期工作。
可能是什么问题？
Chrome 版本 84.0.4147.89
推荐指数
解决办法
查看次数
包含父 <div> 的图像大小
我一直试图让我的图像在同一行上彼此相邻，如果需要，只需将它们裁剪成更小的尺寸。为什么不起作用object-fit？
HTML：
<div class="gallery">
<div class="inner"><img src="images/image1.jpg"></div>
<div class="inner"><img src="images/image2.jpg"></div>
<div class="inner"><img src="images/image3.jpg"></div>
</div>
CSS：
.gallery{
width: 1000px;
height: 300px;
display: flex;
}
.inner{
width: 333px;
height: 300px;
}
.inner img{
object-fit: contain;
}
推荐指数
解决办法
查看次数
沿行对齐图像高度
努力使事情表现出来。
我在响应网站上有动态图像列表。生成布局时，图像可以在行/列或列行中。
这个例子很接近，但是当浏览器调整大小时，成对的图像在底部不对齐...
<div style="width:100%;">
<div style="width:60%; display: flex; margin-left: auto; margin-right: auto;">
<div id="outterrow" style="width:100%; float:left; display: flex; padding-bottom: 1.15%; ">
<div id="column" style="float: left;overflow: hidden;background-color: inherit;width: 49.35%;">
<div id="row" style=" padding-right: 2.330294%; "><img title="2.jpeg" src="https://i.postimg.cc/Xv5YsYv7/2.jpg" sizes="100vw" width="100%">
</div>
</div>
<div id="column" style="float: left;overflow: hidden;background-color: inherit;width: 50.65%;">
<div id="row" style=" "><img title="1.jpg" src="https://i.postimg.cc/B6cQG7Dr/1.jpg" sizes="100vw" width="100%"> </div>
</div>
</div>
</div>
<div style="width:60%; display: flex; margin-left: auto; margin-right: auto;">
<div id="outterrow" style="width:100%; float:left; display: flex; padding-bottom: 1.15%; ">
<div id="column" style="float: …推荐指数
解决办法
查看次数
在具有对象适合性的Flex容器中实现重叠图像
嘿,我之前已经问了一个类似的问题并且能够实现它,那就是我必须使用png图像,缺点是它的方式太大了.
经过一些研究,我发现了一种使用svg容器和图像的alpha和beta通道的方法.
然而,我遇到的主要困难是使对象适合工作,因此图像将始终覆盖其Flexbox容器的整个50%......甚至可能吗？我错过了什么..非常感谢.
https://codepen.io/HendrikEng/pen/RVzYoR?editors=0100
.c-hero {
align-items: center;
display: flex;
flex-direction: row;
justify-content: center;
background: grey;
height: 30px * 15;
text-align: center;
&__image {
display: flex;
margin-bottom: -60px;
margin-top: 60px + 19px;
max-height: 682px;
min-height: calc(100% + 140px);
object-fit: cover;
object-position: top;
width: 50%;
}
&__item {
align-self: center;
width: 50%;
}
}
<section>
<div class="c-hero">
<svg class="c-hero__image" preserveAspectRatio="xMinYMin" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<mask id="transparentmask">
<image width="100%" height="100%" xlink:href="http://i.imgur.com/n080w42.png"></image>
</mask>
</defs>
<image mask="url(#transparentmask)" width="100%" height="100%" xlink:href="http://i.imgur.com/LTgnz9E.jpg"></image>
</svg>
<div class="c-hero__item">
<p>Lorem Ipsum</p> …推荐指数
解决办法
查看次数
具有适合对象但未填充容器的图像
我有一个宽度大于高度的横幅图像。我有一个显示不同尺寸图像的容器 div，对于横幅样式，我需要它拉伸和/或挤压以在两个方向上填充父 div。我看过object-fit:fill，但它似乎只是水平拉伸图像 - 它没有做任何让它垂直填充 div 的事情。
一个有效的例子在这里；代码如下所示：
.tile {
position: relative;
float: left;
margin: 10px;
border: 4px solid green;
height: 400px;
}
.deal {
width: 342px;
background: #ffffff;
}
.tileImage.promo {
object-fit: fill;
}<div class="tile deal hsNational active">
<img class="tileImage promo" src="https://cdn.pixabay.com/photo/2015/12/13/09/42/banner-1090835_960_720.jpg" height="200px">
</div>我究竟做错了什么？（我已经尝试了 的各种值object-fit，但没有一个能满足我的需要。）图像应该水平挤压并垂直拉伸以完全填充绿色边框内的区域。
推荐指数
解决办法
查看次数
CSS object-fit:contains; 在布局中保持原始图像宽度
我正在尝试使用一些Flexbox容器内的图像响应object-fit: contain,并且当图像调整大小时,布局似乎保持原始图像大小,导致滚动条出现.
使用Chrome开发工具检查图像的宽度表明宽度仍为1024(但高度已适当降低.)
(我从CSS FlexBox布局中的自动调整大小图像中获取灵感并保持纵横比？ 达到这一点)
我错过了一些额外的CSS属性吗？
JSFiddle:https://jsfiddle.net/w6hgqf18/1/
html,
body {
margin: 0;
height: 100%;
}
.page {
height: 100%;
display: flex;
}
.main-container {
flex: 1 1 0;
display: flex;
flex-direction: column;
}
.half-containers {
flex: 0 1 50%;
overflow: auto;
box-sizing: border-box;
border: 0.5px solid red;
display: flex;
}
.page-header {
flex: 0 0 auto;
background-color: #dcdcdc;
}
.page-footer {
flex: 0 0 auto;
background-color: #dcdcdc;
}
img {
object-fit: contain; …推荐指数
解决办法
查看次数