适合 vue的css框架
Videos and images have the potential to pose problems when laying out a website.
布置网站时，视频和图像可能会引起问题。
Let’s say you have specified the width of an image explicitly in your CSS. If the width is specified in percentages or viewport units and the image’s height is set to auto, resizing the browser window will keep the aspect ratio of the image.
假设您已经在CSS中明确指定了图片的宽度。 如果以百分比或视口单位指定宽度，并且图像的高度设置为auto ，则调整浏览器窗口的大小将保持图像的纵横比。
However, sometimes you may have limited space available and need to put a constraint on an image’s height. Resizing the browser window now will definitely mess up its aspect ratio.
但是，有时您的可用空间可能有限，并且需要对图像的高度施加约束。 现在调整浏览器窗口的大小肯定会弄乱其宽高比。
Many problems related to image size and aspect ratio, including the one I just discussed, can be solved using CSS’s object-fit and object-position properties.
可以使用CSS的object-fit和object-position属性解决许多与图像大小和纵横比有关的问题，包括我刚刚讨论的问题。
These properties are similar to the more familiar background-sizeand background-position properties. So, even if you have never heard about them before, you won’t have much trouble in understanding how they work.
这些属性类似于更熟悉的background-size和background-position属性。 因此，即使您以前从未听说过它们，也不会在理解它们的工作原理方面遇到很多麻烦。
Both properties work on replaced elements. However, for the sake of brevity, in this article I will use the term image(s) instead of replaced element(s).
这两个属性都对替换的元素起作用。 但是，为了简洁起见，在本文中，我将使用术语“图像”代替被替换的元素。
You might be wondering why use these two properties at all when you can use background-size and background-position. Actually, there are at least two good reasons.
您可能想知道为什么可以在使用background-size和background-position时同时使用这两个属性。 实际上，至少有两个很好的理由。
First, consider a scenario where you have an image that is supposed to be part of an article. If the image dimensions are set in CSS just like the case described in the introduction, resizing the browser window will mess up its aspect ratio. In such a case, you will be tempted to use a div with background-size and background-position properties because simply using an img tag won’t be sufficient.
首先，考虑一种情况，在这种情况下您应该将图像作为文章的一部分。 如果像引言中所述的情况一样，在CSS中设置图像尺寸，则调整浏览器窗口的大小会破坏其宽高比。 在这种情况下，您会倾向于使用具有background-size和background-position属性的div ，因为仅使用img标签是不够的。
The problem with this solution is that you should always try to keep your content and presentation separate. The background properties are meant to be used for presentation purpose. When your images are actually part of the content, it makes more sense to use object-fit and object-position along with the img tag to achieve the same result.
该解决方案的问题在于，您应始终尝试将内容和演示文稿分开。 背景属性旨在用于演示目的。 当图像实际上是内容的一部分时，使用object-fit和object-position以及img标签来获得相同的结果更有意义。
The other reason is that the background properties cannot be applied to videos whereas object-fit and object-position can. Therefore, when displaying videos, object-fit and object-position are your only options.
另一个原因是背景属性不能应用于视频，而object-fit和object-position可以应用。 因此，在显示视频时， object-fit和object-position是您唯一的选择。
This property determines how replaced content like images and videos occupy the space inside their content box. It has five possible values:
此属性确定替换的内容(如图像和视频)如何占据其内容框中的空间。 它具有五个可能的值：
fill
fill
contain
contain
cover
cover
none
none
scale-down
scale-down
The syntax to use this property is shown below:
使用此属性的语法如下所示：
.fit-image { object-fit: fill|contain|cover|none|scale-down; }When set to fill, the image is sized to fit completely inside the content box. The height of image in this case is equal to the height of the box itself. This is also the initial value of the object-fit property.
设置为fill ，图像将调整大小以完全适合内容框。 在这种情况下，图像的高度等于盒子本身的高度。 这也是object-fit属性的初始值。
See the Pen Object Fit: Fill by SitePoint (@SitePoint) on CodePen.
请参见“笔对象适合：在CodePen上按SitePoint( @SitePoint ) 填充” 。
The value contain resizes the image in such a way that the image fits within its content box while still retaining its aspect ratio. This serves two purposes. It avoids image distortion and at the same time keeps the image inside the content box. If the image does not completely cover the content box, the background color that you might have set fills up the remaining space.
该值contain以使图像适合其内容框的方式调整图像的大小，同时仍保留其宽高比。 这有两个目的。 它避免了图像失真，同时将图像保留在内容框中。 如果图像没有完全覆盖内容框，则您可能设置的背景色将填充剩余的空间。
See the Pen Object Fit: Contain by SitePoint (@SitePoint) on CodePen.
见笔对象飞度：包含由SitePoint( @SitePoint上) CodePen 。
The contain value can be useful in situations where you don’t know the dimensions of the image but still want it to fit inside a container of known width.
在您不知道图像尺寸但仍希望将其放入已知宽度的容器中的情况下， contain值很有用。
If you want the image to fill the space inside its content box entirely and still keep its intrinsic aspect ratio, you should use the cover property. In this case, the image is scaled in such a way that the smaller side of the image fits the containing box perfectly. Any part of the image that overflows the box is then cropped.
如果要使图像完全填充其内容框中的空间，并且仍保持其固有纵横比，则应使用cover属性。 在这种情况下，图像的缩放比例应使图像的较小侧面完全适合容纳盒。 然后会裁切图像溢出框的任何部分。
See the Pen Object Fit: Cover by SitePoint (@SitePoint) on CodePen.
请参见“笔对象适合：在CodePen上覆盖 SitePoint( @SitePoint )”。
To show the image with its intrinsic dimensions and ignore any height or width value set on the containing box, you can use none. The image is not resized in this case. However, if any part of the image lies outside its containing box, then it will be cropped.
要显示具有其固有尺寸的图像并忽略包含框上设置的任何高度或宽度值，可以使用none 。 在这种情况下，不调整图像大小。 但是，如果图像的任何部分位于其包含框之外，则会被裁剪。
See the Pen Object Fit: None by SitePoint (@SitePoint) on CodePen.
请参见CodePen上的SitePoint ( @SitePoint )的“笔对象适合度：无” 。
Our final object-fit value is scale-down. As the name suggests, it scales down the image. This means it will be resized as if it has been set to none or contain based on which value results in a smaller image. In other words, if none of the dimensions of our image are greater than the respective dimensions of its containing box, the value none is applied.
我们最终的object-fit值是scale-down 。 顾名思义，它按比例缩小图像。 这意味着将调整它的大小，就好像它被设置为none或contain在其中将基于哪个值产生较小的图像。 换句话说，如果图像的任何一个尺寸都不大于其包含框的相应尺寸，则将应用none值。
See the Pen Object Fit: scale-down by SitePoint (@SitePoint) on CodePen.
请参见CodePen上的Pen Object Fit：按SitePoint( @SitePoint )进行缩放 。
As we saw earlier, the cover property fills up all space inside the containing box while still preserving the intrinsic aspect ratio of images. The images are also placed centrally by default. In situations where the focus point is at the center, this will serve you well. But, what if the focus point of images is not at the center?
如我们先前所见， cover属性会填充容纳盒内的所有空间，同时仍保留图像的固有长宽比。 图像也默认放置在中央。 在焦点位于中心的情况下，这将为您提供很好的服务。 但是，如果图像的焦点不在中心位置怎么办？
The object-position property can help you here. It works just like background-position. The code snippet below sets the position of the image to the top left:
object-position属性可以在这里为您提供帮助。 它的工作原理与background-position 。 下面的代码段将图像的位置设置在左上方：
.zero-zero { object-position: 0px 0px; }Instead of specifying the dimensions in pixels, you can use percentages. For instance, object-position: 0% 0% is top-left and object-position: 100% 100% is bottom-right. This can be helpful when you don’t know the image dimensions.
您可以使用百分比来代替以像素为单位指定尺寸。 例如， object-position: 0% 0%在左上角，而object-position: 100% 100%在右下角。 当您不知道图像尺寸时，这将很有帮助。
When the aspect ratios of your image and its containing box are similar, setting object-position won’t seem to make much difference. However, the results improve when the aspect ratios are off by a noticeable factor. The CodePen demo below illustrates my point.
当图像的高宽比及其包含框的纵横比相似时，设置object-position似乎并没有多大区别。 但是，当长宽比明显降低时，结果会改善。 下面的CodePen演示说明了我的观点。
See the Pen GZewMJ by SitePoint (@SitePoint) on CodePen.
请参阅CodePen上的SitePoint( @SitePoint )提供的Pen GZewMJ 。
Setting position to top-left in the second case brings the sun back into focus.
在第二种情况下，将位置设置为左上角会使太阳重新聚焦。
One more thing worth mentioning about the object-position property is that it is animatable and can produce stunning effects if used properly. Consider the code below:
值得一提的关于object-position属性的另一件事是，它是可动画的，如果使用得当，可以产生惊人的效果。 考虑下面的代码：
img { /* other CSS here... */ object-fit: cover; object-position: 0% 0%; animation: ltr 5s alternate infinite; } @keyframes ltr { 0% { object-position: 0% 0%; } 25% { object-position: 20% 0%; } 100% { object-position: 100% 100%; } }With this code, I am animating the position of the image using keyframe animations and, as you can see, the final result looks great.
通过此代码，我将使用关键帧动画对图像的位置进行动画处理，如您所见，最终结果看起来很棒。
See the Pen Animating the object-position Property by SitePoint (@SitePoint) on CodePen.
请参见CodePen上的Pen通过SitePoint( @SitePoint )对对象位置属性进行动画 处理 。
This could probably also be used in videos when focus moves from one person to another.
当焦点从一个人转移到另一个人时，这可能也可以用在视频中。
While these properties can prove to be very useful, whether you can actually use them in real world depends on the browsers you support. object-fit is supported in all major browsers except IE/Edge and object-position is supported in all major browsers except IE/Edge and Safari.
虽然这些属性可能非常有用，但是您是否可以在现实世界中实际使用它们取决于您支持的浏览器 。 除IE / Edge外，所有主流浏览器均支持object-fit除IE / Edge和Safari外，所有主流浏览器均支持object-position 。
Generally, you might just need the object-fit property. If you are willing to sacrifice the user experience of some users you can go ahead and use this property. When you need to support older browsers, you can try the polyfill by Federico Brigante.
通常，您可能只需要object-fit属性。 如果您愿意牺牲某些用户的用户体验，则可以继续使用此属性。 当需要支持较旧的浏览器时，可以尝试Federico Brigante的polyfill 。
I hope you enjoyed this tutorial and the accompanying demos. If there is something that I have missed or if you have anything to add, please let me know in the comments.
希望您喜欢本教程和随附的演示。 如果我错过了某些事情，或者您有什么要补充的，请在评论中让我知道。
翻译自: https://www.sitepoint.com/using-css-object-fit-object-position-properties/
适合 vue的css框架
