您现在的位置是：主页 > news > 深圳网站关键字优化/百度网盘登陆

深圳网站关键字优化/百度网盘登陆

admin2025/5/16 0:46:21【news】

简介深圳网站关键字优化,百度网盘登陆,做网站如何写需求,烟台网站设计object-fit 最近在复习VUE，准备面试，在看了 “VUE实例” 的时候发现了这个属性，搜索了一下发现效果挺好。不用 object-fit 实现 cover 效果以前的时候，做用户头像或者新闻栏的时候，用到的图片基本默认都是使用 fi…

深圳网站关键字优化,百度网盘登陆,做网站如何写需求,烟台网站设计object-fit 最近在复习VUE，准备面试，在看了 “VUE实例” 的时候发现了这个属性，搜索了一下发现效果挺好。不用 object-fit 实现 cover 效果以前的时候，做用户头像或者新闻栏的时候，用到的图片基本默认都是使用 fi…

object-fit

最近在复习VUE，准备面试，在看了 “VUE实例” 的时候发现了这个属性，搜索了一下发现效果挺好。

不用 object-fit 实现 cover 效果

以前的时候，做用户头像或者新闻栏的时候，用到的图片基本默认都是使用 fill 填充到整个容器中的。如果图片比例和容器比例差太多，就会产生形变。以前的做法是外面嵌套一个 div 并设置 overflow : hidden，然后内部容器使用 JS 进行判断，对于小的边设置 100%，另一个设置 auto。这样才能达到充满又不变形的效果。而现在只需要使用 object-fit : cover 这一条配置就可以实现上面繁杂的判断内容了。

示例代码如下

<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<style>
div {width: 30rem;height: 30rem;border: 1px solid red;margin: 2rem;/** 隐藏超出的内容 */overflow: hidden;/** 用来居中 **/display:flex;justify-content:center;align-items:center;
}
.cover-width {width: 100%;height: auto;
}
.cover-height {width: auto;height: 100%;
}
</style>
<script>
window.()=>{const imgs = document.getElementsByTagName("img");for(const img of imgs) {img.classList.add("cover-" + (img.naturalWidth < img.naturalHeight ? "width" : "height"));}
}
</script>
</head>
<body><div><img src="seiya1.jfif"/></div><div><img src="seiya2.jfif"/></div>
</body>
</html>

在这里插入图片描述

内容区域（内容盒子）

下图是浏览器调试工具里显示的盒模型。content-box 即内容盒子，指的是虚线框内部的区域。img 元素的 src 所填充的区域不会超过这个内容区域。
在这里插入图片描述

可选的值范围

值	描述
fill	默认值。拉伸并填满整个内容区域
contain	保持原有尺寸比例，进行缩放，保证替换内容尺寸一定可以在容器里面放得下。因此，此参数可能会在容器内留下空白。
cover	保持原有尺寸比例，进行缩放，保证替换内容尺寸一定大于容器尺寸，宽度和高度至少有一个和容器一致。因此，此参数可能会让内容的部分区域不可见
none	不进行任何处理，保持内容原始尺寸
scale-down	使用 none 或 contain 中最终呈现的尺寸更小的那个

代码示例（VUE）

<!DOCTYPE html>
<html>
<html>
<head>
<meta charset="utf8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> 
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
#app {display: flex;justify-content: space-around;align-content: space-around;flex-wrap: wrap;
}
h1 {font-size: 5rem;text-align: center;
}
img {border: 2px solid red;width: 40rem;height: 40rem;
}
img:nth-child(2n+1) {border-color: blue;
}
</style>
</head>
<body>
<div id="app"><div v-for="value in objectFits"><!-- 当 value 是 0，false，""，NaN，null，undefined 的时候都会被判定为 false --><h1>{{ value || "原图" }}</h1><img src="seiya1.jfif" :style="{objectFit: value}"/><img src="seiya2.jfif" :style="{objectFit: value}"/></div>
</div>
<script>
new Vue({el: "#app",data: {objectFits : ['','fill','contain','cover','none','scale-down'],color: 'red'}
});
</script>
</body>
</html>
</html>

在这里插入图片描述

object-position

object-position 和 background-position 可选的值是一样的。用来定义图片相对当前元素的位置。可选值如下：

可选的值范围

值	描述
top left top center top right center left center center center right bottom left bottom center bottom right	如果仅规定了一个关键词，那么第二个值将是 center
x% y%	第一个值是水平位置，第二个值是垂直位置左上角是 0% 0%，右下角是100% 100% 如果仅规定了一个值，另一个值将是 50%
xpos ypos	第一个值是水平位置，第二个值是垂直位置左上角是 0 0。单位是像素（0px 0px）或任何其它 CSS 单位。如果仅规定了一个值，另一个将是50% 可以混合使用 % 和 position 值