grid实现响应式布局,css图片自适应object

用一行 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 实现的响应式布局

object-fit 解决图片指定大小被压缩问题

第一次遇到这个属性,是在给video 写 poster的时候,选取的作为poster的img的尺寸有点小,导致video播放器两边有留白。在控制台查看video默认样式的时候看到了这个属性。

chrome中默认是object-fit:contain,当poster尺寸过小的时候就会如下问题:

图片 2

注意播放器两边的留白,显然 这不是我们想要的样式,如果能完全覆盖就更好了。尝试按照background-size属性的写法尝试了改写为cover。效果如下:

图片 3

perfect,可是还有点美中不足。。。不过我们还是先来了解下object-fit这个属性。

The object-fit CSS property specifies how the contents of a replaced element should be fitted to the box established by its used height and width. —MDN

MDN上给的解释,object-fit这个属性指定可替换元素在已被设定好的宽高中展示的方式。

也就是说以前我们给img指定宽高,会影响图像本身的比例,导致被压缩拉伸等。现在我们可以通过object-fit来控制这个图像在指定宽高中如何显示的问题(或者可以这样理解,我们指定图片的宽高,就相当于是一个指定大小的div,我们调整图片的object-fit属性,就相当于给这个div调整背景的background-size属性)

一共有五个值fill | contain | cover | none | scale-down效果可以在这里查看

下面是在项目中应用的场景:

图片 4

这是我在淘宝头条的文章list上截取的图片。可以看出它的文章配图都是采用div.pic通过内联的background-image来显示配图的。用意 很明显,当从文章提取的图片和文章list的展示块尺寸比例不一致的时候,背景图可通过指定background-size:cover来避免对图片造成的压缩或者拉伸。

下图是我用object-fit:fit对结构的一次改写:

图片 5

这样页面的结构更为清晰,语义化更好,而且对前端绑定数据更为方便。

(这里我们不讨论更深层次的img和背景图的优劣势问题)

另外还有一个object-position和background-position性质差不多,我可以指定显示的位置,来完成上面我说的美中不足的问题~

我们来看下兼容性的问题,可以看出虽然是个草案属性,但是浏览器在移动端支持度还是挺好的。在移动端开发还是可以应用这个属性的。

图片 6

当图片比例不固定时,想要让图片自适应,一般都会用background-size:cover/contain,但是这个只适用于背景图。

关于作者:周进林

图片 7

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

图片 8

图片 9

img有个属性object-fit

属性值:object-fit: fill / contain / cover / none / scale-down;

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

fill: 默认值。内容拉伸填满整个content box, 不保证保持原有的比例。

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

contain: 保持原有尺寸比例。长度和高度中短的那条边跟容器大小一致,长的那条等比缩放,可能会有留白。

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

cover: 保持原有尺寸比例。宽度和高度中长的那条边跟容器大小一致,短的那条等比缩放。可能会有部分区域不可见。

现在就让让我们开始吧!

none: 保持原有尺寸比例。同时保持替换内容原始尺寸大小。

设置

scale-down:保持原有尺寸比例,如果容器尺寸大于图片内容尺寸,保持图片的原有尺寸,不会放大失真;容器尺寸小于图片内容尺寸,用法跟contain一样。

具体如下图所示:

图片 10

CSS Demo

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

用法:

img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}

这个属性看起来很好用,但是!但是!IE并不支持

图片 11

浏览器的兼容情况

又但是,你可以去GutHub看看...

图片 12

img有了object-fit,还得有个位置属性object-position,用法跟background-position一样。


还有一个问题,就是上图CSS Demo,我给了容器一个红色的背景色,因为img宽高都设置了百分百,我想看看img最终的大小是多少,然后我就给了img一个黑色的背景色。结果,如图所示,图片大小果然是百分百。

这是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 单位。结果是:

图片 13

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

图片 14

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

更加高级的响应式

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

repeat()

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

CSS 代码:

.container {

    display: grid;

    grid-template-columns: repeat(3, 100px);

    grid-template-rows: repeat(2, 50px);

}

换句话说,repeat(3, 100px) 与 100px 100px 100px 相同。 第一个参数指定了你想要的列数或行数,第二个参数指定了它们的宽度,所以上面的代码将为我们创建和第一个一样的布局。

图片 15

auto-fit (自适应)

然后是自适应。让我们跳过固定数量的列,而是用 auto-fit 取代 3 。

CSS 代码:

.container {

    display: grid;

    grid-gap: 5px;

    grid-template-columns: repeat(auto-fit, 100px);

    grid-template-rows: repeat(2, 100px);

}

这会达到以下效果:

图片 16

你会看到,现在这个网格已经可以通过容器的宽度来改变列的数量。

它只是试图尽可能多地将 100px 宽的列排列在容器中。

但是,如果我们将所有列硬编码为 100px ,我们永远得不到我们想要的灵活性,因为它们很少会加起来正好等于容器的宽度。正如你在上面的 gif 图中所看到的,网格通常会在右侧留下空白区域。

minmax()

为了解决这个问题,我们需要的最后一方法是 minmax()。我们只需用 minmax(100px, 1fr) 替换 100px 即可。这是最终的CSS。

CSS 代码:

.container {

    display: grid;

    grid-gap: 5px;

    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));

    grid-template-rows: repeat(2, 100px);

}

注意,所有的响应都发生在一行 CSS 中。

这会达到以下效果:

图片 17

正如你们所见,这样很完美。minmax() 函数定义大于或等于 min 且小于或等于 max 的大小范围。

所以现在列的宽度至少 100px 。但是,如果有更多的可用空间,网格将简单地分配给每个列,因为列的值变成了一个等分单位 1fr ,而不是 100px 。

添加图片

现在最后一步是添加图片。 这与 CSS Grid 没有任何关系,但是我们还是要来看看代码。

我们将在每个网格项内添加一个 img 标签。

HTML 代码:

<div><img src="img/foret.jpg"/></div>

为了使图像适合该网格项,我们将它设置为与网格项一样宽和高,然后使用 object-fit: cover;。这将使图片覆盖整个容器,如果需要的话,浏览器会裁剪该图片。

CSS 代码:

.container > div > img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}

效果如下:

就是这么简单!你已经了解了 CSS Grid 中最复杂的概念之一,所以后面请自己动手吧。

浏览器支持

在我们结束之前,我还需要提及浏览器的支持。在写这篇文章的时候,占全球 77% 的网站流量的浏览器支持CSS Grid,而且正在攀升。

我相信 2018 年将是 CSS Grid 大量应用的一年。很快会得到突破,并将成为前端开发人员的必备技能。就像过去几年在 CSS Flexbox 所发生的一样。

本文由星彩网app下载发布于前端技术,转载请注明出处:grid实现响应式布局,css图片自适应object

TAG标签:
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。