首页 > 其他分享 >图片铺满div元素不变形,超出部分隐藏,保留中心部分css代码

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

时间:2023-12-11 12:22:06浏览次数:30  
标签:fit 代码 object 铺满 div css 图片

在我们网站更新文章的时候,经常会插入图片,丰富信息。但是我们插入的图片长宽比例并不一定是固定的。我们在调用缩略图的时候,常常会出现图片变形的情况,高和宽不成比例。那么如何让图片不变形,又能铺满div元素呢?
我们可以使用css代码中object-fit属性来实现。
object-fit属性指定元素的内容应该如何去适应指定容器的高度与宽度。
css代码如下:
.div{
width:200px;
height: 200px;
overflow:hidden;
}
.div img{
width:100%;
height: 100%;
object-fit: cover;//重要
}
css代码中,cover值含义为保持原有尺寸比例。但部分内容可能被剪切。

标签:fit,代码,object,铺满,div,css,图片
From: https://www.cnblogs.com/akweb/p/17894113.html

相关文章

  • Codeforces Round 914 (Div. 2)
    CodeforcesRound914(Div.2)A.Forked!#include<bits/stdc++.h>#defineendl'\n'#defineintlonglongusingnamespacestd;voidsolve(){inta,b;intx,y;cin>>a>>b>>x>>y;map<pair<int,in......
  • Codeforces Round 803 (Div. 2)
    基本情况A题秒了。B题经典+2。(经典不开longlong)C题读错题,没得思路。B.RisingSandProblem-B-Codeforces思路好想,分类讨论找规律就行。这里还是要强调一下认真分析数据:InputThesecondlineofeachtestcasecontains\(n\)integers\(a_1,a_2,\ldots,a_n\)......
  • Codeforces Round 914 (Div. 2)
    基本情况脑子最卡的一集。A题读假题,卡了快一小时。B题代码太复杂,出错不好修改,一直调。虽然最后都出来了,但是没有剩下任何时间看后面题目了。A.Forked!Problem-A-Codeforces一开始不知道犯得什么病,觉得可以斜着走一格算作一步,然后情况就太多了,非常不好处理。后面突......
  • Codeforces Round 914 (Div. 2)
    C.ArrayGame题意:给定一个n的数组以及k的操作数,每次可以选择下表为i,j(i<j)得到一个abs(a[i]-a[j])的数放在数组末尾,问你k次操作后,数组中最小的数是多少?思路:首先k>=3选相同的下表两次,一定结果是0,是最小。k==1遍历出下表两两相减的绝对值最小以及本身数组中最小的即可k==2要将数......
  • css:两个行内块元素和图片垂直居中对齐
    (目录)两个行内块元素垂直居中对齐先看一段代码:<style>.box{width:200px;height:200px;line-height:200px;font-size:20px;text-align:center;display:inline-block;background-color:green;}</style><divclass="box&q......
  • CSS学习
    学习CSS 一、概述 CSS(层叠样式表)是一种用于描述HTML(或XML和SVG等其他标记语言)文档样式的样式表语言。它被广泛用于网页和用户界面的设计和布局。通过使用CSS,开发人员可以分离内容和样式,使网页更易于维护,提高用户体验。 二、学习资源 W3Schools、菜鸟教程三、核心概念......
  • Codeforces Round 904 (Div. 2)
    [CodeforcesRound904(Div.2)](https://codeforces.com/contest/1894)A.SimpleDesign暴力就行了1e9跑不满的#include<bits/stdc++.h>#defineintlonglong#defineendl'\n'usingnamespacestd;voidsolve(){intx,k;cin>>x>>......
  • 如何设置div内的模块靠左显示,模块内容按行显示?
    要设置一个div内的模块靠左显示,并且模块内容按行显示,你可以使用CSS中的flexbox布局来实现。以下是一种可能的解决方案:HTML结构:<divclass="container"><divclass="module">模块1</div><divclass="module">模块2</div><divclass="module"&g......
  • Codeforces Round 801 (Div. 2)
    基本情况A就开始犯病,导致+2.B、C都过样例了,但是都错。B.CircleGame赛时推出来奇数必输,也知道偶数不是必赢,但是思路不清楚。这里我没意识到一个很关键的性质。奇数堆拿的石堆会变,这也导致了必输,比如三个堆\(1,2,3\)。表粗的为JOE。123123显然JOE拿的石堆是变化的......
  • Codeforces Round 909 (Div. 3)
    https://codeforces.com/contest/1899  一个小游戏#include<iostream>#include<cstdio>#include<cstring>#include<algorithm>usingnamespacestd;intn;intmain(){cin>>n;while(n--){intx;......