图片铺满div元素不变形，超出部分隐藏，保留中心部分css代码

转自：https://www.cnblogs.com/ymdi/p/15707504.html
需求：图片铺满父级元素，有些图片横向、有些是纵向，图片宽高比不一致，导致不能铺满或者变形。针对这种情况，需要以图片中心位置向四周铺满父级。

我们可以使用css代码中object-fit属性来实现。
object-fit属性指定元素的内容应该如何去适应指定容器的高度与宽度。
css代码如下：
.div{
width:200px;
height: 200px;
overflow:hidden;
}
.div img{
width:100%;
height: 100%;
object-fit: cover;//重要
}
css代码中，cover值含义为保持原有尺寸比例。但部分内容可能被剪切。

图片铺满div元素不变形，超出部分隐藏，保留中心部分css代码相关推荐

小程序、h5图片铺满div，自适应容器大小
图片铺满div,自适应容器大小,不会拉伸变形小程序 mode属性 scaleToFill:缩放模式,不保持纵横比,图片拉伸至填满 image 元素 aspectFit: 缩放模式,保持纵横比,保证图 ...
HTML+CSS实现背景图片铺满页面的方法
HTML+CSS实现背景图片铺满页面的方法针对页面背景图片我整理了几种方法仅供参考一.DIV中添加背景图片二.img中设置背景图片三.Body中设置背景图片结语针对页面背景图片我整理了几种 ...
如何用纯CSS将图片填满div，自适应容器大小
如何用纯CSS将图片填满div,自适应容器大小 2016-10-11 13:33 网页设计标签:css 代码 5987 3 我有一个模板,想按常规做一个div里面放置一个img图 ...
利用css将背景图片铺满整个屏幕
方法一: <!DOCTYPE html> <html><head><meta charset="UTF-8"><meta ht ...
background背景图片铺满背景并且不重复
background-repeat: no-repeat; 不重复 background-size:cover; 背景铺满元素调整背景图片的宽度或高度(较小者),以铺满整个元素
web图片铺满网页_css怎么让图片铺满？
css让图片铺满的方法:可以使用background-size:cover样式设置背景图片铺满.background-size属性规定背景图像的尺寸. background-size 属性: back ...
VUE动态变换背景图片的实现 +背景图片铺满+ 一般路由的配置
一 .动态变换背景图片的实现代码如下: <template><div class="body" v-loading="loading" :s ...
CSS —— 背景图片填满DIV、鼠标滑过放大图片
1.让背景图片填满DIV 应用background-size属性可以设置背景图片填满整个div,background-size取值及解释如下: (1)background-size:cover MDN ...
网页背景图片铺满手机屏幕
主要用于网页端开发页面,图片需要适应手机屏幕大小的场景(但是不推荐手机和PC端使用一套前端) 一效果图二代码 <!DOCTYPE html> <html> <hea ...

图片铺满div元素不变形，超出部分隐藏，保留中心部分css代码

图片铺满div元素不变形，超出部分隐藏，保留中心部分css代码相关推荐

最新文章

热门文章