html平铺 拉伸 图片,[CSS]背景图片中平铺与拉伸

article/2025/9/14 19:10:13

在某业务场景下,需要支持背景图的平铺和拉伸,那么在CSS中的这俩属性表现有何区分关系到是否符合业务表现,因此有必要清晰知道其差别。

原本以为只有自己会遇到,没想到群里有小伙伴也问到了。

0x00 background-size

在CSS中有background-size属性,平铺与拉伸可以通过下面两个值实现:

平铺:cover

拉伸:100% 100%

0x01 表现如何

设置的背景图原图比例表现如下:

292e06d9c1e657349f2cb6054c28fa69.png

比较的代码实现如下:

背景图长宽比例问题探索

*{

margin: 0;

padding: 0;

border: 0;

}

.box {

width: 400px;

height: 300px;

background-color: aquamarine;

background-image: url(http://p0.qhimg.com/bdr/__85/t01cf4d52137a580601.jpg);

background-size: cover;

background-position: center;

}

.box2 {

width: 400px;

height: 300p


http://chatgpt.dhexx.cn/article/xkqhk9mc.shtml

相关文章

html 如何完美的显示图片,不拉伸图片,完整显示等等。

效果图&#xff1a; 代码&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document<…

html插入背景图片如何拉伸,css怎样拉伸背景图片?

在css中可以使用background-size属性来拉伸背景图片。background-size属性规定背景图像的尺寸&#xff0c;此属性可以使用数值、百分比、cover等设置图片拉伸。 background-size属性规定背景图像的尺寸。 语法&#xff1a;background-size: length|percentage|cover|contain; 属…

html如何拉伸一个图片,css怎么拉伸图片?

css可以使用background-size属性设置图片拉伸&#xff0c;background-size属性规定背景图像的尺寸。此属性可以使用数值、百分比、cover等设置图片拉伸。 background-size属性规定背景图像的尺寸。 background-size属性介绍&#xff1a; 语法&#xff1a;background-size: leng…

html 图片纵向拉伸,css如何让图片拉伸?

css设置图片拉伸的方法&#xff1a;1、使用width与height属性强制设置图片大小使图片拉伸。2、使用background-size属性拉伸背景图片。 1、强行设定大小值会导致拉伸 示例&#xff1a;//html .... //css img{ width: 80px; height: 80px; margin-right: 10px; } 效果图&#xf…

Android中Webview显示全屏拉伸图片

需要在一个视频view上叠加一个webview显示一些第三方的内容&#xff0c;例如视频、图片、h5页面等。显示图片时出现了边框和滚动条等不在预期的内容。由于对web相关的技术不甚了解&#xff0c;查询一番后完美解决。图片自适应webview大小显示。 xml布局文件如下&#xff1a; &…

PS调节图片:拉伸、变形

一、对图片进行变形处理 打开PS软件&#xff0c;选中需要处理的图片。 ctrlJ复制一层图层 点击编辑选项&#xff0c;在下拉菜单里找到变换→变形选项 即可对图片进行变形操作 注意变形的图片下边还有一层图形&#xff0c;那即是我们复制图层的效果。&#xff08;复制图层相当…

数组作为函数参数进行传递

今天编程序时发生了个这样的错误&#xff1a; 在头文件里 定义了一个数组&#xff1a; View Code 1 char s[]"1234567890"; 又定义了一个现显示组的函数&#xff1a; View Code 1 void Display(char* c); 通过下面这两条语句分别在现实函数和主函数中现实数组的大小&…

C++关于数组作为函数参数的值传递和指针传递

明确&#xff1a; 数组作为函数参数和普通的参数是有区别的&#xff1b; 函数中普通的参数 如同void insert(int a,int b)之类的传递分为3种方式传递 值传递指针传递&#xff0c;指针值的传递&#xff0c;引用传递&#xff0c;它们的参数的传递是将实参的值赋给形参。 而数…

详谈C++中数组作为函数参数

一、一个例子引发的思考 运行以下代码&#xff0c;请问输出是什么&#xff1f;例子来源于《剑指Offer》&#xff0c;我对书上例子做了修改&#xff0c;让其可以运行。 #include<iostream> using namespace std;int GetSize(int data[]) {return sizeof(data); } int mai…

易懂的数组作为函数参数(C语言)

易懂的数组作为函数参数&#xff08;C语言&#xff09; 目录 易懂的数组作为函数参数&#xff08;C语言&#xff09;1、数组做函数参数2、通过形参数组修改数组元素3、数组排序 1、数组做函数参数 &#xff08;1&#xff09;、若将一个数组作为实际参数传递给函数&#xff0c;…

以数组作为函数参数的函数调用

调用有参函数时需要提供实参&#xff0c;实参可以是常量&#xff0c;变量或者表达式&#xff0c;数组元素就相当于变量&#xff0c;因此数组元素可以用作函数实参&#xff0c;但是不能用作函数形参&#xff08;因为在函数被调用时临时分配存储单元&#xff0c;不可能为一个数组…

数组作为函数参数传递

数组作为函数参数传递 数组作为函数参数传递时&#xff0c;传入的是数组首地址&#xff0c;并非数组本身。今天总算理解了这一点。写了一个打印数组元素的函数&#xff0c;代码如下&#xff1a; void print1(int arr[]) {int len sizeof(arr) / sizeof(arr[0]);cout <<…

C++之数组作为函数参数

好消息&#xff0c;好消息&#xff0c;数组也可当参数啦&#xff01;&#xff01;&#xff01; 长这样&#xff0c; void arr(int a[])还挺好看&#xff08;生平第一次夸代码/狗头/&#xff09; 众所周知&#xff0c;变量可以当参数&#xff0c;但是数组当参数的话只能被认为…

C语言 数组作为函数参数

1、数组元素作为函数实参 int a[10]; //相当于定义了10个变量&#xff0c;a[0]~a[9]&#xff0c;那么数组元素就是&#xff1a;a[0]~a[9]&#xff0c;数组元素就可以当成变量使用。 #include<stdio.h> //函数声明 int whichmax(int x,int y); int main() {int a[10];a[1…

数组元素作为函数参数

数组元素作为函数参数 数组元素作为函数参数数组元素作函数实参数组名作为函数参数 数组元素作为函数参数 数组可以作为函数的参数使用&#xff0c;进行数据传送。数组用作函数参数有两种形式&#xff0c;一种是把数组元素(下标变量)作为实参使用&#xff1b;另一种是把数组名…

将数组作为函数参数调用

数组与单个元素一样&#xff0c;也可以作为参数被函数调用&#xff0c;但其用法与单个元素调用存在不同。 对于单个元素调用&#xff0c;如不使用引用&或者指针&#xff0c;则在函数中对形参的操作不会反映到实参上&#xff0c;即实参不会发生改变&#xff0c;具体用法详见…

零基础入门学习C语言008讲:函数(4)

8.&#xff17;数组作为函数参数 数组可以作为函数的参数使用&#xff0c;进行数据传送。数组用作函数参数有两种形式。 一种是把数组元素(下标变量)作为实参使用&#xff1b; 另一种是把数组名作为函数的形参和实参使用。 8.7.1 数组元素作函数实参 数组元素就是下标变量…

数组做函数的参数

&#xff11; 一维数组做参数 数组作为函数的参数&#xff0c;是指以数组名作为实际参数传递给函数。用数组名做函数参数时&#xff0c;不是进行直接的值传递&#xff0c;而是地址的传送&#xff0c;也就是把实参数组的首地址赋予形参数组名。 比如&#xff0c;下面声明了一个…

顺序表的基本操作代码实现

顺序的基本操作代码实现&#xff08;初始化、插入、删除、销毁等等&#xff09; 1.标头.h #pragma once #include<stdio.h> #include<stdlib.h> /*author:W.yuData:2020-04-27 */#define INITSIZE 10 //定义顺序表的初始最大长度typedef struct {int* data; //顺…

数据结构实验报告:顺序表基本操作的实现

1、实验目的 &#xff08;1&#xff09;领会线性表顺序存储结构的特点。 &#xff08;2&#xff09;掌握线性表顺序存储结构的常见算法。 2、实验具体要求 &#xff08;1&#xff09;建立顺序表存储数据序列&#xff08;10&#xff0c;20&#xff0c;30&#xff0c;40&…