共计 2430 个字符,预计需要花费 7 分钟才能阅读完成。
有幻想,有干货,微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录,有一线大厂面试残缺考点、材料以及我的系列文章。
在开发时,始终心愿有一种原生的 CSS 形式来裁剪图片,并将其定位在我须要的任何方向。这能够通过应用一个额定的 HTML 元素和不同的 CSS 属性来实现,前面解释。
在这篇文章中,将率领大家理解 Jake Archibald 在今年年初提出的新的 CSS 属性object-view-box
。它容许咱们裁剪或调整被替换的 HTML 元素,就像一个 </img>
或 <video>
问题
在上面的例子中,咱们有一个须要裁剪的图像。请留神,咱们只想要该图像的特定局部。
目前,咱们能够通过以下形式之一来解决这个问题。
- 应用
<img>
并将其包裹在一个额定的元素中 - 应用图像作为
background-image
并批改地位和大小
包在一个额定的元素中
这是一个常见的解决这个问题的办法, 步骤如下:
- 将图像包裹在另一个元素中(在咱们的例子中是
<figure>
)。 - 增加
position: relative
和overflow: hidden
- 为图片增加了
position: absolute
,并对定位和尺寸值进行了调整,以实现这一后果。
<figure>
<img src="img/brownies.jpg" alt="">
</figure>
figure {
position: relative;
width: 300px;
aspect-ratio: 1;
overflow: hidden;
border-radius: 15px;
}
img {
position: absolute;
left: -23%;
top: 0;
right: 0;
bottom: 0;
width: 180%;
height: 100%;
object-fit: cover;
}
将图像作为背景
在这个解决方案中,咱们应用一个 <div>
将图片作为背景,而后咱们扭转地位和大小值。
<div class="brownies"></div>
.brownies {
width: 300px;
aspect-ratio: 3 / 2;
background-image: url("brownies.jpg");
background-size: 700px auto;
background-position: 77% 68%;
background-repeat: no-repeat;
}
这很好,但如果咱们想把上述内容利用于 <img>
呢?嗯,这就是 object-view-box
的作用。
引入 Object-View-Box
属性 object-view-box
可能会在 Chrome 104 中反对。当初能够在 Chrome canary 中应用。
依据 CSS 标准。
object-view-box
属性在一个元素上指定了一个 “ 视图框 ”,相似于<svg viewBox>
属性,在元素的内容上进行缩放或平移。
该属性的值是 <basic-shape-rect> = <inset()> | <rect()> | <xywh()>
。在本文的演示中,我将着重介绍 inset()
的用法。
咱们回到这个问题上来。
有了 object-view-box
,咱们就能用 inset 从四边(上、右、下、左)画一个矩形,而后利用 object-fit: cover
来防止变形。
<img src="img/brownies.jpg" alt="">
img {
aspect-ratio: 1;
width: 300px;
object-view-box: inset(25% 20% 15% 0%);
}
这是怎么做到的呢?咱们往下看。
图像的外在尺寸
外在大小是默认的图像宽度和高度。我解决的图像大小为 1194 × 1194 px
.
img {
aspect-ratio: 1;
width: 300px;
}
应用上述 CSS,图片的渲染尺寸将是 300×300px
。
咱们的指标是在固有图像上画一个矩形。要做到这一点,咱们应用 inset()
值。
应用 inset
inset()
值将基于原始图像的宽度和高度,从而造成一个裁剪过的图像。它将帮忙咱们绘制一个嵌入的矩形并管制四个边缘,相似于解决 margin
或padding
。
inset
值定义了一个嵌入的矩形。咱们能够管制四个边缘,就像咱们解决 margin
或padding
一样。在上面的例子中,卡片的所有边缘都有一个 20px
的嵌入。
回到 object-view-box
:
img {
aspect-ratio: 1;
width: 300px;
object-view-box: inset(25% 20% 15% 0%);
}
以下是上述内容的背地的样子,值 25%、20%、15%
和0%
的值别离代表顶部、右侧、底部和左侧。
修复图像失真
如果图像的尺寸是正方形的,那么裁剪后的后果将是变形的。
这能够应用 object-fit
属性来解决。
img {
aspect-ratio: 1;
width: 300px;
object-view-box: inset(25% 20% 15% 0%);
object-fit: cover;
}
放大或放大
咱们能够应用 inset
来放大或放大图像。依据我的测试,过渡或动画不能与 object-view-box
工作。
咱们也能够用一个负的 inset
值来放大。
设想一下,这对于可能缩放图像是如许有用,而不须要用一个额定的元素来包装它。
事例
地址:https://codepen.io/shadeed/pe…
期待这个新的属于尽快来了!
作者:ishadeed > 起源:ishadeed
原文:https://ishadeed.com/article/…
交换
文章每周继续更新,能够微信搜寻「大迁世界」第一工夫浏览和催更(比博客早一到两篇哟),本文 GitHub https://github.com/qq449245884/xiaozhi 曾经收录,整顿了很多我的文档,欢送 Star 和欠缺,大家面试能够参照考点温习,另外关注公众号,后盾回复 福利,即可看到福利,你懂的。