使用object-fit:cover将图像放入div
object-fit: cover是CSS属性，用于定义在一个容器中放置图像时如何调整图像的尺寸和比例。它的作用是将图像等比例缩放并完全填充容器，同时保持图像的宽高比例不变，以保证图像完全覆盖容器。
使用object-fit: cover可以将图像放入div中，并在保持图像原始宽高比的情况下，自动调整图像的大小以使其完全覆盖整个div区域。这在前端开发中非常有用，可以实现类似于响应式背景图或图像展示的效果。
优势：
- 自适应布局：通过object-fit: cover，可以轻松实现图像在不同分辨率和屏幕尺寸下的自适应布局，保证图像始终填充满容器。
- 保持比例：object-fit: cover会保持图像的原始宽高比，不会发生变形，确保图像显示的真实性和美观性。
- 良好的兼容性：object-fit: cover在现代浏览器中得到良好的支持，可以广泛应用于各类前端开发项目中。
应用场景：
- 响应式网页设计：通过object-fit: cover可以实现背景图的自适应布局，使背景图在不同屏幕尺寸下完整展示，提升用户体验。
- 图片展示：将图像放置在一个固定大小的容器中，并使用object-fit: cover可以实现图像的裁剪和缩放，确保图像始终填充满容器，适用于各类图片展示场景。
推荐腾讯云相关产品和产品介绍链接地址：
- 腾讯云CVM（云服务器）：https://cloud.tencent.com/product/cvm
- 腾讯云COS（对象存储）：https://cloud.tencent.com/product/cos
- 腾讯云CDN（内容分发网络）：https://cloud.tencent.com/product/cdn
- 腾讯云VOD（点播）：https://cloud.tencent.com/product/vod
- 腾讯云SCF（无服务器云函数）：https://cloud.tencent.com/product/scf
以上是关于使用object-fit: cover将图像放入div的完善且全面的答案。
相关·内容
2回答
我想强制一个图像来匹配没有溢出的父div的维度。
<div class="flex flex-col max-h-screen">
<div class="flex flex-1">
<div class="flex w-1/2 max-h-full">
<img src="image.jpg" class="max-h-full object-cover overflow-hidden" />
</div>
&l
浏览 0提问于2021-05-13得票数 0
回答已采纳
我试图将我的图像包装在一个容器div中，尽管在这样做的时候，我的图像仍然占据了原始大小的全部宽度和高度。相反，我希望图像占据包装器容器的相应宽度和高度，而不是使用自己的宽度和高度。 我尝试使用object-fit:cover；尽管它在我的情况下似乎不起作用。 .desktop-slideshow {
height: 500px;
width: auto;
outline: 4px solid red;
}
.desktop-slideshow img {
object-fit: cover;
} <div class="desktop-slideshow&
浏览 29提问于2019-01-22得票数 0
2回答
我的img在div里面，有精确的width和height。我想在那里放置像background-size: cover这样的图像来填充整个div，所以HTML是：
<div class="cover">
<img class=active src="http://pixabay.com/static/uploads/photo/2015/02/26/17/56/clock-650753_640.jpg" alt="time">
</div>
CSS是：
.cover {
width: 400px
浏览 4提问于2015-03-09得票数 4
回答已采纳
2回答
我试图有一个图像拉伸和填充一个容器div的图像覆盖，以使它的圆形效果。如果容器div高度大于图像，则显示背景色。不管怎么说，让图像伸展来填充div，而不是切断和显示背景颜色？
<style>
.hero-interior-banner-image {
height: auto;
position: relative;
}
.interior-hero-overlay {
position: absolute;
top: 0px;
left: 0px;
z-in
浏览 2提问于2022-02-21得票数 1
1回答
如何使一个正常的图像(无论是'img‘或'svg')行为完全像’背景-图像‘？我的意思是，覆盖整个屏幕然后被裁剪成不显示边框？
只有'css‘没有'js’。
我试过这个，大多来自
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body, html {
height: 100%;
浏览 7提问于2022-02-01得票数 0
3回答
是否可以将图像的高度和宽度设置为包含该图像的div的大小？不仅仅是使用background-size: cover
或者这是一个愚蠢的问题，这是你唯一能做到的方法？
浏览 1提问于2017-08-03得票数 0
1回答
使用CSS缩放背景图像
、、、、
我使用的是来自Startbootstrap.com的以下，主页上有一个旋转木马。当我使用CSS属性设置背景图像时，background-size: cover;它拉伸图像但不缩放。如何拉伸图像以覆盖整个旋转木马面板并适当缩放。
HTML：
<div class="item">
<div class="fill" style="background-image:url('Content/img/myimage.jpg');"></div>
CSS：
header.carousel .fil
浏览 4提问于2017-06-19得票数 0
5回答
我有几个列，我使用flex给出了相同的宽度。每个标签都包含img标记，我希望这些图像显示object-fit: cover大小。
.container {
display: flex;
flex-direction: row;
width: 100%;
}
.test {
flex: 1;
margin-right: 1rem;
overflow: hidden;
height: 400px;
}
img {
object-fit: cover;
}
<div class="container">
<div class=
浏览 4提问于2016-05-10得票数 31
回答已采纳
2回答
所以我使用了引导，我想知道我做错了什么。我试着把我的图像一排排，但它们到处都是，我的文字也没有正确显示。
matches.html
<div class="container ">
<h2>It's a match!</h2>
<div class = "row">
<div class="col-4">
<img src="{{ user.photo.url }}" width=
浏览 2提问于2020-05-10得票数 0
回答已采纳
1回答
CSS对象适合位置fill，contain正在工作，但cover的工作方式类似于fill。它必须填充div ，而不拉伸，不管图像的多少部分是cover。我将div设置为flex，并将object fit position应用于div中的图像。为什么cover不能工作？如果我将px中的高度设置为图像，它可以工作，但是图像必须根据div调整大小，所以我设置了高度auto
<html>
<head>
<style>
.left{
float:left;
}
.col100{
width:100%;
}
.col33{
width:33%;
}
.h
浏览 0提问于2018-06-18得票数 2
正如所讨论的，我正在尝试获得一个要在div中覆盖的图像。只需要这些简单的代码，我就能够通过background-image实现这一点
div{
width: 172px;
height: 172px;
border-style: solid;
background-image: url('../images/img1.jpg');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
结果，图像在div中居中
浏览 4提问于2017-05-21得票数 20
回答已采纳
2回答
我有背景图像的登录页面，问题是cus图像看起来不像原始照片：
检查图片截图宽度是否有问题：
这是页面的HTML/jsx：
<div className="login-page">
<picture>
<source srcSet={mobileImg} media="(min-width: 400px) and (max-width: 700px)" />
<source srcSet={tabletImg} media="(min-width: 700px) and (m
浏览 15提问于2019-07-23得票数 0
回答已采纳
我想要拍摄一张寓言图像，让它放大/缩小，以使用父div的整个空间，同时保持其原始比例。我希望图像被裁剪(可以，只要它在垂直和水平方向上都居中)。
我尝试过以下代码：
<div class="container" style="width: 800px">
<div class="row">
<div style="
height:340px;
width: 100%;
overflow: hidden;
bor
浏览 0提问于2017-07-21得票数 10
回答已采纳
我想使背景图像拉伸和适应垂直100%和水平100%浏览器窗口。总是固定的。同样，当用户向下滚动或向上滚动时。背景图像应该填满整个窗口。当浏览器窗口被调整大小时，背景图像应该伸展和停留。
在尝试了这么多不成功的变体之后，我到目前为止拥有的是：
我的css代码：
body, html {
width: 100%;
height: 100%;
margin: 0;
background: url(https://i-cdn.phonearena.com/images/article/125256-two_lead/Android-11-R-Preview-A-quality-of-life
浏览 3提问于2020-06-14得票数 0
回答已采纳
我目前正在为我的网站使用Carousel属性，但我无法使用background- size : cover，以便让我的carousel中的图片“拉伸”到浏览器的全部大小。我该怎么绕过它呢？ 注意:我之所以在下面的代码块中这样做，是因为图像太大，所以我使用了"w-auto“来调整图像的大小，使其看起来像现在的样子。 这是我的HTML代码： <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class=&#
浏览 19提问于2019-03-05得票数 0
回答已采纳
4回答
我试图在div中“移动”一个图像，该图像使用object-fit: cover;和object-position: center;进行调整。
我的问题是:我是否可以将中心位置的图像移到右边，而不需要从css中删除object-*？
.myDiv {
width: 150px;
height: 150px;
margin: 0 15px;
}
.myDiv.before img {
width: 100%;
height: 100%;
}
.myDiv.after img {
width: 100%;
height: 100%;
object-fit: c
浏览 2提问于2020-10-16得票数 1
回答已采纳
我有以下传送带：
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
...
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<im
浏览 10提问于2018-09-03得票数 1
是否有可能使background:cover;效应的<video></video>标签和居中？
我试过，就像图像一样，但它不起作用。我认为这是因为视频标签不是<div>的背景，但是如何使它工作呢？或者如何做到这将是背景视频？
<div class="" style="width:90%;
height:300px; border:1px solid red;
background-color:blue; background-size:cover;
margin:0 auto; ">
<video w
浏览 3提问于2016-12-22得票数 3
回答已采纳
此css从Bootstrap 4中取出卡的响应布局。如何在卡的图像上放置object-fit: cover;，并从Bootstrap 4获得响应布局？
#imgUNcover {
width: 285px;
height: 145px;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center;
object-position: center;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn
浏览 4提问于2018-09-13得票数 1
回答已采纳
我想调整/拉伸我的图像，使其完全适合我的div类的大小。我试着使用了background- size : cover，但是图像只是缩放到了我的div类的大小，并且图像的一半是不可见的。我也尝试了object-fit: fill，但它对我不起作用。有没有人有办法解决我的问题？
浏览 5提问于2021-03-02得票数 0
1回答
我想让img标记以与div相同的方式响应，使用背景图像的背景位置:中心和背景大小:覆盖我的问题是，我将发布很多图像(在网格布局中)，这些图像没有相同的宽度或高度。苏，如果我使用img标签的高度:自动，我得到不同的高度，每次。当前解决方案：
使用bg图像和1像素图像作为宽度和高度：
<div style="background-image:url(http://example.com/img.jpeg);
background-position: center;
background-size: cover; width="30%" ">
浏览 4提问于2015-03-22得票数 1
我试图在不需要使用background-image的情况下找到解决方案，但能够使用内联<img>。
我想这样做，以便如果图像容器的尺寸与图像不相同，图像仍将填充容器的宽度和高度，裁剪任何部分。
此外，如果图像的一部分小于容器，它将超过100%来填充容器。
在下面的例子中，我有一个巨大的图像，可以很容易地填充容器的宽度和高度。容器与图像的高宽比是不同的，所以我以空白结束，不管是水平的还是垂直的。无论如何，我都想填满那个容器，即使图像的一部分会被裁剪掉。
class[*='container'] {
margin-bottom: 50px;
}
.contain
浏览 0提问于2017-01-24得票数 4
回答已采纳
2回答
我正在尝试使用CSS做一个旋转木马，但我希望图像在放大时不会扭曲，并且仍然占据屏幕的大部分。我写了一个小代码来说明我的问题。
div.some{
width: 1400px;
height: 900px;
background-color: red;
}
img{
width: 100%;
max-height: 500px;
}
HTML
<div class="some">
<img src="IMG_7331.jpg" alt="">
</d
浏览 3提问于2021-03-13得票数 0
我有下面的代码和css。左边的图像正确地出现了。但是，当将两个图像添加到右侧时，它会显示一个图像在另一个图像的下方且大小更大。所以我用object-fit: scale-down;添加了样式rightImg，在一定程度上减小了大小，但它不像列那样并排出现。而且图像周围仍然有更多的空间，它不是左对齐，顶部对齐。 <div className="col-md-12">
<div className={styles.Content}>
<img src={imgUriL1} />
<div className={styl
浏览 14提问于2020-08-09得票数 1
回答已采纳
1回答
中心裁剪图像
、、
我需要在垂直框(如600 X 400)中裁剪景观图像，我有下面的html代码与css代码为中心裁剪。但是输出图像不是中心裁剪的，而且也是拉伸的。
<div id="posts">
<div class="image">
<a href="#">
<img src="Vasco45_barbosa.jpg">
</a>
</div>
</div>
#posts .image
浏览 1提问于2016-10-23得票数 0
回答已采纳
我使用object-fit:cover。但它会裁剪我的形象。我想让我的图像在所有分辨率下看起来都是一样的，不需要裁剪。目前它是从侧面切开的。我希望它作为一个完整的页面，没有任何裁剪。
body,html{ height:100%;}
#home{ height:100vh;}
#home img{ height:100vh; width:100%; object-fit:cover;}
<div id="home">
<img src="https://i.stack.imgur.com/EHmdc.png" class="im
浏览 1提问于2019-06-08得票数 0
5回答
我不能将图像放在<div class="cover">标记内居中。它出现了，但我不能在HTML文件或CSS文件中以任何方式使用样式来操作它，我需要帮助。有没有一种方法能够将图像居中，并将文本置于图像的中心。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="C:\Users\Administrator\Desktop\Taniti-Tourism-Prototype\CSS\Hom
浏览 0提问于2019-11-21得票数 2
我试着在左边得到一个图像。随着窗口大小的变化，它应该缩放，保持高宽比。如果图片低于600 it，它应该滚动。在右边，我要图像的细节。就像这样：
到目前为止，我还停留在让图像进行适当缩放上。我能得到的最接近的是或
.details {
float: right;
width: 200px;
background: green
}
.theImage {
width: 100%;
object-fit: contain;
object-fit: cover;
overflow: hidden;
}
.container {
background:
浏览 0提问于2018-04-03得票数 2
回答已采纳
2回答
html
<div>
<img src="http://www.hdwallpapersplus.com/wp-content/uploads/2013/06/abstract_color_background_picture_8016-wide.jpg" />
</div>
css
div{
width: 200px;
height: 100px;
background-color: red;
}
img{
position: relative;
width: 100%;
height: 10
浏览 0提问于2013-07-30得票数 0
回答已采纳
2回答
我正在制作一张卡片，上面有下面的图像和描述，但图像太放大了，看起来不吸引人。我试着调整高度和图像，但它不起作用
HTML
<div id="event-card">
<div id="card-image">
<img src="{{ URL::to('/assets/photos/event3.jpg') }}">
</div>
<div class="container" id=&
浏览 22提问于2019-11-10得票数 0
我试图让我的图像调整到容器的大小，当调整到平板电脑或手机视图时，使用容器的大小并调整大小，但是我的图像太放大了，就像这样:我不确定我在这里做错了什么
<div class="ps-section--homeCenter" style="display:grid; grid-template-columns: repeat(3,1fr); grid-auto-rows: 213px 213px; grid-gap: 10px; padding:0; margin: 0; box-sizing: border-box;">
<div
浏览 0提问于2021-05-06得票数 0
我试着，谷歌和搜索，但不能解决非常简单的情况…我有：
<div class = "BG">
<div class = "image"></div>
</div>
背景应该居中，图像应该居中。在浏览器调整大小时，两者应按比例调整大小。
对于BG类，我有以下内容：
background: url("../img/d_background.jpg");
width: 100%;
height: 2160px;
overflow: hidden;
background-repeat: no-r
浏览 0提问于2018-10-04得票数 0
5回答
我有一个高分辨率(width: 5540px, height: 2680px)的图像，我需要这个图像覆盖整个div (这个div的宽度和高度的80% )。该图像显示在屏幕上，分辨率为768 of至1600 of。
当我使用background-size: cover时，图像会变宽，但底部会被切断。
当我使用background-size: contain时，图像会调整大小以适应高度，但宽度没有完全填充。
当我使用background-size: 100%时，图像会填充整个div，但会被扩展。
有办法这样做吗?或者我是否需要调整图像的大小(例如，将图像调整为1600 to (宽度)，因为此图像仅
浏览 1提问于2017-03-30得票数 2
回答已采纳
2回答
目前，我正在制作一个系统，可以控制家庭电器设备在网上。当我设置相机图像时，我想要在容器中很好地匹配图像，但是它不显示在框中。
我怎样才能把缩略图放进盒子里？
React.js
<div className="discover_device col-4">
<div className="box">
<ReactPlayer
className="camera_video_discover"
url={'xxx.com'}
con
浏览 11提问于2022-09-23得票数 0
我有两个问题要解决。 因此，我在一个具有display: grid;的父类中有5个<div>标记 <section class="section2">
<div class="box6"><img src="img/men-limited.jpg" alt="" /></div>
<div class="box7"><img src="img/women-limited.jpg" alt=""
浏览 20提问于2020-10-25得票数 0
我试图拥有一个完整的屏幕图像，使用下面的代码使用css就足够容易了。
width:100%;
height:100%;
background: url('photo2.jpg');
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size:
浏览 6提问于2014-08-11得票数 2
回答已采纳
目前我使用的是bootstrap缩略图。这段代码得到了我想要的东西，但仅限于桌面视图。一旦我调整到移动端，它保留了我指定的358x358大小，所以它不响应。
基本上，我希望缩略图图像总是被裁剪到正方形，无论图像文件是什么给它。如何在保持正方形图像宽高比不变的情况下使其具有响应性？谢谢你的帮助。
.thumb-img{
object-fit: cover;
overflow: hidden;
height: 358px;
width : 358px;
}
我是这样使用它的
<div class="thumbnail">
浏览 2提问于2017-04-24得票数 2
我试图让一个图片成为一个div /容器的全部大小的背景，而不管div本身有多少内容。
当我尝试：
<div class = 'container-fluid'>
<img src="image.jpeg" style="object-fit: cover;" />
</div>
图像有完整的高度，但是图像比屏幕的宽度更长(因为分辨率很高)。然而，当我将图像作为背景添加时，它似乎很好，压缩宽度以与页面匹配，但允许完整的高度，但是由于背景的大小是由内部的内容定义的，所以我尝试了：
<div class
浏览 3提问于2020-10-17得票数 0
回答已采纳
我正在JavaScript中编写一些HTML代码，其中我还使用内联css来添加使用背景-img属性的背景图像。但是在浏览器上，图像没有显示，当我签入控制台时，图像路径没有正斜杠。
document.getElementById("featuresCards").innerHTML = cardsObject ={title：“FMCG&B”，描述：“营销和业务规划”，imgPath：“./图像/固件3.jpg”} function cardShow() { let featCards =""；cardsObject.forEach(cObj=>{
浏览 9提问于2021-11-17得票数 1
回答已采纳
我正在尝试弄清楚如何使用object-fit来正确缩放16:9的垂直图像。 我几乎什么都试过了，但都没有成功！ https://jsfiddle.net/pdocys3j/ .container {
width: 300px; /*any size*/
height: 200px; /*any size*/
}
.object-fit-cover {
width: 100%;
height: 100%;
object-fit: cover; /*magic*/
} <div class="container">
<img cla
浏览 28提问于2020-05-03得票数 0
2回答
在我的项目中，我将背景设置为我选择的图像。
这方面的代码如下：
<body>
<img class="backgroundimg" src="{% static 'spotifywallpaper.jpg' %}" style='position:fixed;top:0px;left:0px;width:100%;height:100%;z-index:-1;'>
</body>
然后在css中使用媒体查询。我对这些查询和开发都是新手，所以请告诉我，我是否做错了什么，或者是在效率低下的情
浏览 2提问于2019-11-07得票数 0
回答已采纳
2回答
我希望用背景填充父div，但不是将图像设置为div的背景属性，而是将其设置为div中的单个img元素。
换句话说，我想这样做：
div {
background-image: url('someimg.jpg');
background-size: cover;
background-repeat: no-repeat;
}
带有img元素的..but，如下所示：
<div>
<!-- Image element should cover the container on dekstops and small screens as
浏览 0提问于2018-04-17得票数 1
我试图降低图像高度而不拉伸图像。但它的切割底部部分的图像。
使用对象尝试r：
尝试使用容器：
.cover {
object-fit: cover;
}
<img height="260px" width="290px" class="cover" src='https://i.stack.imgur.com/zj631.png'>
原始图像：
降低高度后的图像裁剪图像的底部：
浏览 6提问于2017-06-28得票数 1
回答已采纳
2回答
如何将图像放入div (离子)
、、、、
我有一个div容器，在div里面有一个img。 <div style="background-color: red; height: 200px; width: 200px;">
<ion-img src="{{kategori[i].img}}"></ion-img>
</div> 我想用我的图像填充这个div。但它不适合里面。它看起来是这样的： https://prnt.sc/12qcj8h 有些是小的，有些是大的。如何填充div中的内容？我不想看到红色的背景，我希望它填充在div里
浏览 26提问于2021-05-10得票数 0
回答已采纳
1回答
我试图使我的模态(反应模态节点包)可滚动(里面有一个img )。
这是我的代码：
content: {
position: 'absolute',
backgroundColor: '#FFF',
padding: '15px',
zIndex: '1000',
width: '90%',
borderRadius: '.5em',
},
overlay: {
position: 'fixed',
displ
浏览 6提问于2022-03-29得票数 1
我有一种情况，我想使用背景图像而不是图像标签。在这里，根据屏幕大小调整图像大小很重要。第一个例子是我想要的.图像会调整大小，但当高度降到300px时会停止。然后，如果屏幕尺寸变得非常窄，图像将保持居中，两端都会被裁剪。这可以通过object-fit:cover轻松实现 第二个div使用背景图像，几乎可以工作，但当屏幕变窄时，我无法使图像居中。请注意，图像只是被裁剪成正确的大小。 .myimgtag {
width:100%;
height:auto;
min-height:300px;
object-fit:cover}
.mybackgroundimg {
background-
浏览 9提问于2019-04-23得票数 0
回答已采纳
1回答
图像没有完全覆盖包含的区域(你可以看到底部的小提尔带)。
为什么会这样呢？我能做些什么，这样图像才能完全覆盖div？
div {
width: 300px;
}
.container {
width: 100%;
background-color: teal;
}
img {
max-width: 100%;
object-fit: cover;
}
<div>
<div class="container">
<img src="https://icatcare.org/app/uploads/201
浏览 3提问于2020-02-22得票数 2
回答已采纳
我正在努力使皮带充满了超大的形象。这个想法是，图像有一些固定的大小，不会改变。图像所在的div，当使浏览器窗口变大时，应该会显示图像的隐藏部分。我做到了。但有个问题..。在某种程度上，当浏览器窗口变得更小时，图像就会缩小。
我希望在这个图像的高度将等于容器的高度，边将被裁剪，而图像将保持它的比例。
一些代码：
.picbanner {
background: url(https://IMG) no-repeat center center;
background-size: 100% auto;
height: 250px;
object-fit: cover;
overf
浏览 0提问于2021-02-06得票数 0
回答已采纳
我正在使用
object-fit: cover;
为了让图像填充固定大小的div，如下所示
.home img {
object-fit: cover;
width: 650px;
height: 300px;
}
然而，图像被均匀地裁剪周围，因为我在图像的右下角有文本，我想要从左侧和顶部裁剪封面。
这个是可能的吗？
我尝试了所有的对象匹配方法和对象位置，但都没有给出所需的行为。
浏览 11提问于2019-07-29得票数 0
回答已采纳
1回答
我使用CSS来缩放图像，但是当我调整窗口的大小时，所有图像都会以不同的大小缩小(参见附件图像)。有什么线索我需要做什么才能让这件事有反应
.boxcontainer {
position: relative;
width: 100%;
}
.grid-wrap {
display: grid;
grid-template-columns: auto auto auto auto;
position: relative;
}
.img {
width: 336px;
height: 336px;
float: left;
object-fit:
浏览 10提问于2022-07-12得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
