如何通过background-size: cover让TP自动大小

最新推荐文章于 2023-08-03 10:24:27 发布
最新推荐文章于 2023-08-03 10:24:27 发布
阅读量1.8k 收藏 1
点赞数
分类专栏： 菜鸟论 文章标签： HTML CSS 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44484894/article/details/88948061
版权 
			background-size: cover
			  （图片大小自动适应）

开发工具与关键技术：Dream weaver 、CSS样式  
作者：曾子千
撰写时间：2019年2月15日

如果想要一张图片和元素同样大小，但是图片它是不可能天生跟你随便创建的元素一模一样大小的，那么我们该如何去达成相对应的效果呢？

首先创建一个元素，在样式中给它一个长宽高来规定它的形状，引入图片，这时图片和元素是完全不一样的，这要在元素的样式中添加一个background-size属性让图片大小自动适应，这样就达成我们想要的效果了！
在这里插入图片描述

程序猿-小千
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
background-cover:模拟“背景大小”
05-11
背景封面在HTMLVideoElement和HTMLImageElement上模拟“背景大小：封面”。句法BackgroundCover ( element , ...例子var BackgroundCover = require ( 'background-cover' ) ;var videoContainer = document .
cordova-plugin-background-upload:用于背景上传的Cordova插件
03-31
支持平台的iOS 安卓安装要安装插件： cordova plugin add cordova-plugin-background-upload --save要卸载此插件： cordova plugin rm cordova-plugin-background-upload样本用法该插件需要在上传之前进行初始化。...
background-size:cover | contain；
04-12 1470
background-size:cover | contain; 原图 不使用background-size 第一张背景图片：600 × 431第二张背景图片：426 × 600每个元素的大小：350 × 350 background-size:cover; 背景铺满元素 调整背景图片的宽度或高度（较小者），以铺满整个元素保持背景图片的宽高比
说说background-size:cover;与background-size:contain的区别
Allenyhy的博客
09-04 3万+
1.background-size:cover 官方background-size:cover;的解释是这个样子的，截图如下所示： 解释：1）是按照图片的比例放大或者缩小至充满容器，而不是按照容器的比例大小来缩放。             2）如果照片的比例和容器的比例是不一致的，必定会导致照片的不完整性。 下面举一个栗子来说明这种情况： 首先原始的背景图片是这样的。 而设置b...
background-size:cover;与background-size:contain;的区别
weixin_39413579的博客
04-01 637
作用：将图片以相同宽高比缩放以适应整个容器的宽高。 cover：图片宽高比不变、铺满整个容器的宽高，而图片多出的部分则会被截掉（以铺满整个容器为主） contain：图片自身的宽高比不变，缩放至图片自身能完全显示出来，所以容器会有留白区域（以显示完整背景图为主） ...
html background缩放,background-size使用详解
weixin_34944897的博客
06-19 6459
设置背景图片的大小，以长度值或百分比显示，还可以通过cover和contain来对图片进行伸缩。语法：background-size: auto | | | cover | contain取值说明：1、auto：默认值，不改变背景图片的原始高度和宽度；2、：成对出现如200px 50px，将背景图片宽高依次设置为前面两个值，当设置一个值时，将其作为图片宽度值来等比缩放；3、：0％~100％之间...
css怎么设置背景图片自适应大小
Jack, what else can you do besides holding your little darling?
07-12 1万+
css怎么设置背景图片自适应大小
css中background-size属性使用介绍
09-25
在CSS中，`background-size`属性是一个非常重要的样式，它用于控制背景图像的尺寸，从而影响元素背景的显示效果。这个属性允许我们精确地设定背景图像的宽度和高度，或者使用预定义的值来实现特殊效果。以下是关于`...
CSS3之背景尺寸Background-size使用介绍
12-13
CSS3之背景尺寸Background-size是CSS3中新加的一个有关背景的属性，这个属性是改变背景尺寸的通过各种不同是属性值改变背景尺寸呈现的大小。下面就想来看下有关CSS3 之背景尺寸Background-size的介绍吧。 一、...
background-size:cover和background-size: contain的区别
Hiroshi's
02-01 322
对于这样的一个div: <div class="item-del"></div> .item-del{ width: 14px; height: 12px; background: url(/imgs/icon-close.png) no-repeat center; background-size: cover; flex: 1; } 如果我们设置background-size:cover: 就相当于这个背景图片在所在div的宽高范围内伸展到div的边
background-size: cover和100%的区别
jwq98的博客
08-03 648
background-size:100% 100%：把背景图进行横向和纵向的拉伸，图片比例随之改变，这种方法可能会导致图像失真；background-size: cover：把背景图扩展至足够大，直至完全覆盖背景区域，图片比例保持不变且不会失真，但某些部分被切割无法显示完整背景图。
html中的高和宽背景色怎么写,css background-size与背景图片填满div
weixin_31452537的博客
06-08 320
background-size与背景图片填满div在开发中，常有需要将一张图片作为一个div的背景图片充满div的需求background-size的取值及解释background-size共有三种属性，分别为background-size: coverMDN文档解释说明：缩放背景图片以完全覆盖背景区，可能背景图片部分看不见。A keyword that is the inverse of con...
[HTML]background-size可以缩放大小
cxu123321的博客
06-11 565
[HTML]background-size可以缩放大小 转自:http://www.igooda.cn/jsdt/20130827355.html background-size需要两个值，它的类型可以是像素（px）、百分比（%）或是auto，还可以是cover和contain。第一个值为背景图的width，另外一个值用于指定背景图上的height，如果只设定1个值，则第2个默认为auto，但当值为cover和contain时除外。cover：保持图像的宽高比例，将图片缩放到正好完全覆盖定义的背景区域，
background-size值：cover、100%和contain的区别
菜菜的博客
04-30 2万+
background-size 属性规定背景图像的尺寸。 先看看W3C的解释： background-size：contain；等比缩放，按照某一边来覆盖显示区域的，若区域大于图片的比例，会有白边，图片不会变形 图片右边有空白区域 background-size：100% 100%;---按容器比例撑满，图片变形； 图片被横向拉伸 background-s...
background-size 之 背景图的尺寸设置
qq_45288176的博客
06-16 1万+
引：background-size: 没有设置任何尺寸时使用图片本身的大小，宽度和高度都是auto默认值可以用px设置成具体的值，也可以使用百分比各种不同比例的适配问题，完美适配很少发生背景图1和背景图2 you红色边框分隔开来背景图1背景图2......
CSS之Background-size:cover
KK_2018的技术博客_程序员不止是程序员
12-04 2765
background-size:100% 100%把背景图进行横向和纵向的拉伸，图片比例随之改变，可能导致图像失真 background-size: cover把背景图扩展至足够大，直至完全覆盖背景区域，图片比例保持不变且不会失真，但某些部分被切割无法显示完整背景图像 一般和如下语法连用 background-image: url(../images/1.png); background-...
CSS 的background-size：cover属性值和contain属性值
单枪匹码
12-12 1万+
1、语法：background-size：length|percentage|cover|contain； 2、参数：参考文章：菜鸟教程 3、浏览器支持： 4、标签定义及使用说明： 5、通常情况下都是使用第1个和第2个属性值，那么后两个如何使用呢？我们来写一个小demo记录一下： <div id="div4"></div> #div4{ width: 1000px...
完美的背景图全屏css代码 – background-size:cover?
热门推荐
03-26 4万+
在写主题样式的时候经常会碰到用背景图铺满整个背景的需求，这里分享下使用方法 需要的效果 图片以背景的形式铺满整个屏幕，不留空白区域保持图像的纵横比（图片不变形）图片居中不出现滚动条多浏览器支持 以图片bg.jpg为例 最简单，最高效的方法 CSS3.0 归功于css3.0新增的一个属性background-size，可以简单的实现这个效果，这里用fixed和cente
background 互联网图片_完美的背景图全屏css代码 – background-size:cover?
weixin_36263738的博客
12-30 424
在写主题样式的时候经常会碰到用背景图铺满整个背景的需求，这里分享下使用方法需要的效果图片以背景的形式铺满整个屏幕，不留空白区域保持图像的纵横比(图片不变形)图片居中不出现滚动条多浏览器支持以图片bg.jpg为例最简单，最高效的方法 CSS3.0归功于css3.0新增的一个属性background-size，可以简单的实现这个效果，这里用fixed和center定位背景图，然后用background...
background-size:cover
最新发布
11-23
background-size: cover是一种CSS属性，用于设置背景图像的尺寸。它旨在确保背景图像能够覆盖整个元素，同时保持其宽高比。这意味着如果背景图像的原始尺寸不适合元素的尺寸，它将被拉伸或压缩，以适应元素的大小。 该属性的主要目的是提供一个“覆盖”的效果，确保背景图像能够完全覆盖元素的背景区域，同时保持其原始的宽高比。这有助于在保持图像质量的同时，为元素提供一致的背景效果。 使用background-size: cover时，背景图像可能会被拉伸或压缩，以适应元素的尺寸。这可能会导致图像的某些部分被裁剪或模糊，具体取决于图像的原始尺寸和元素的尺寸。 需要注意的是，background-size属性还可以用于设置其他背景属性，如background-position和background-repeat。这些属性可以进一步控制背景图像在元素中的位置和重复方式。 总之，background-size: cover是一个有用的CSS属性，用于设置背景图像的尺寸，以确保它能够覆盖整个元素并保持其宽高比。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值