来自 前端知识 2019-12-07 15:32 的文章
当前位置: 金沙澳门官网网址 > 前端知识 > 正文

居中并裁剪图片,grid实现响应式布局

用一行 CSS 居中并裁剪图片

2015/07/20 · CSS · CSS

本文由 伯乐在线 - 周进林 翻译,黄利民 校稿。未经许可,禁止转载!
英文出处:medium.com。欢迎加入翻译组。

设置图片的裁剪尺寸非常简单,你只需在 CSS 里使用这行代码:

CSS

img { object-fit: cover; }

1
2
3
img {
     object-fit: cover;
}

就是这样。不需要语义、包装 div 或者其他没意义的代码。

这种技术能很好地把大小不合适的头像图片裁剪为正方形或者圆形的图片。以下面那只熊的宽图片来举例。一旦把 object-fit:cover 技术应用在这种图片上,并且设置好,图片自己就会进行裁剪和居中。

图片 1

object-fit:cover 的裁剪方式和 background-size:cover 的完全相同,不过它是用来为 imgsvideos 和其他的媒体标签设置样式的,而不是给背景图片设置样式。

相当多的最新浏览器都支持 object-fit 技术,并且还有 polyfill 项目让你能在更老的浏览器(IE8+)里使用该技术。

object-fit 的其他属性感兴趣?来尝试一下。

1 赞 2 收藏 评论

一行 CSS 代码实现响应式布局 – 使用 Grid 实现的响应式布局

关于作者:周进林

图片 2

茫茫大海中的一枚程序猿,为了进化为一个高富帅人类而努力着。关注java、python、linux、vim等(新浪微博:@酒肉和尚--进林) 个人主页 · 我的文章 · 20 ·  

图片 3

图片 4

在这篇文章中,我将教你如何使用 CSS Grid(网格) 布局来创建一个超酷的图像网格,它会根据屏幕的宽度改变列的数量,以实现响应式布局。

而这篇文章中最漂亮的部分是:添加一行 CSS 代码即可实现响应式布局。

这意味着我们不必通过丑陋的类名(即 col-sm-4,col-md-8)来混淆 HTML ,或者为每一个屏幕尺寸创建媒体查询。

现在就让让我们开始吧!

设置

对于本文,我们将继续使用 5分钟学会 CSS Grid 布局 文章中使用的网格。然后我们将在文章的最后添加图片。以下是我们的初始网格的外观:

图片 5

这是HTML:

HTML 代码:

 <div class="container>

<div>1</div>

<div>2</div>

<div>3</div>

<div>4</div>

<div>5</div>

<div>6</div>

</div>

还有相应的 CSS :

CSS 代码:

.container {

    display: grid;

    grid-template-columns: 100px 100px 100px;

    grid-template-rows: 50px 50px;

}

注意:这个例子也有一些基本的样式,比如容器宽度,网格间隔,背景颜色什么的,我不会在这里介绍,因为它与 CSS Grid 没有任何关系。

如果这段代码让你感到困惑,我建议你阅读 5分钟学会 CSS Grid 布局 这篇文章,在那里我解释了 Grid 布局模块的基础知识。

让我们开始将 列 实现响应式布局。

使用等分(fr)单位实现基本的响应式

CSS Grid 带来了一个全新的值,称为等分单位,即 fr 。它允许你将容器可用空间分成你想要的多个等分空间。

让我们将每个列更改为一个等分单位宽度。

CSS 代码:

.container {

    display: grid;

    grid-template-columns: 1fr 1fr 1fr;

    grid-template-rows: 50px 50px;

}

这里发生的事情是,将整个网格的宽度分成三等分,每一列都占据一个 fr 单位。结果是:

图片 6

如果我们将 grid-template-columns 的值更改为 1fr 2fr 1fr,那么第 2 列现在将是另外 2 列的 2 倍。总宽度现在是 4 等分,第 2 列占据了 2 等分,而其他 2 列则各占 1 等分。看起来类似这样:

图片 7

换句话说,等分单位值使你可以非常容易地改变列的宽度。

更加高级的响应式

但是,上面的例子并没有给我们想要的响应式,因为这个网格总是包含 3 列。我们希望我们的网格根据容器的宽度来改变列的数量。要做到这一点,你必须学习三个新的概念。

repeat()

我们将从 repeat() 函数开始。 这是指定列和行更强大的方法。 让我们把原来的网格改成使用 repeat() :

CSS 代码:

.container {

    display: grid;

本文由金沙澳门官网网址发布于前端知识,转载请注明出处:居中并裁剪图片,grid实现响应式布局

关键词: