background-size:背景图片缩放

article/2025/8/26 2:15:10

作用:设置背景图片的大小,
语法:background-size:宽度 高度;
取值:
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {width: 400px;height:300px;background-color: pink;background-image: url(./images/1.jpg);/*background-repeat: no-repeat: 即无论背景图片的大小, 只显示单个背景图片*/   background-repeat: no-repeat;/* background-size: 300px; *//* background-size: 50%; *//* 如果图的宽或高与盒子的尺寸相同了, 另一个方向停止缩放 -- 导致盒子可能有留白 */background-size: contain;/* 保证宽或高和盒子尺寸完全相同 , 导致图片显示不全 *//* background-size: cover; *//* 工作中, 图的比例和盒子的比例都是相同的, contain 和cover效果完全相同; */}</style>
</head>
<body><div class="box"></div>
</body>
</html>

在这里插入图片描述


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

相关文章

Python进行图片缩放

Python提供了图片处理的库PIL(Python Image Library)&#xff0c;功能十分强大&#xff0c;下面介绍使用PIL进行图片的缩放。 1、安装PIL库 使用pip进行安装&#xff0c;安装命令为pip install Pillow&#xff0c;安装完成之后&#xff0c;from PIL import Image来检验是否安…

js点击图片缩放

前言 最近因为项原因&#xff0c;需要图片预览功能&#xff0c;本来想使用组件库的图片预览组件的&#xff0c;后来因为项目ui组件库版本过低&#xff0c;无法使用组件库的预览功能&#xff0c;只能手搓一个简单的预览功能。废话不多说&#xff0c;直接上码。 代码&#xff1…

bmp格式图片缩放(位图缩放)

bmp位图格式理逐渐地被广泛应用&#xff0c;其格式的特点是包含的图像信息较丰富&#xff0c;几乎不进行压缩。bmp图片由文件头&#xff0c;位图信息头&#xff0c;24位图片以下还有调色板&#xff0c;和图像数据组成。位图的信息头包含下列变量&#xff1a; 调色板的结构为蓝…

图片缩放原理

**shape[0] 图像的高 shape[1] 图像的宽 shape[2] 图像的图像通道数量 np.zeros(shape, dtypefloat, order‘C’) 示例&#xff1a; import numpy as np Zero np.zeros(10) print&#xff08;Zero&#xff09; print(Zero.shape) 输出&#xff1a; [0. 0. 0. 0. 0. 0. 0. …

CSS 3之图片缩放

图片缩放 1. 通过标记设置图片大小2. CSS 3中的 width 和 height3. CSS 3 中的 max-width 与 max-height 1. 通过标记设置图片大小 使用 img 的描述标记 height 和 width 能设置图片大小&#xff1b; height 和 width 分别表示图片的高度和宽度&#xff0c;可以是数值或百分比…

1缩放图片

图片缩放 最近临域插值 双线性插值 原理 src(原图像) 1020 dst&#xff08;目标图片&#xff09; 510可以用原图像上的点src表示目标图像上的点dst #例如&#xff1a;原图像的点&#xff08;2,4&#xff09;表示目标图像的点&#xff08;1,2&#xff09;知道目标图像&#xf…

CSS学习37:图片缩放

语法&#xff1a; 1、x y 单独设置 transform: scale(x轴缩放倍数, y轴缩放倍数); 2、统一设置 transform: scale(缩放倍数); 一般情况下, 只为scale设置一个值, 表示x轴和y轴等比例缩放 transform: scale(缩放倍数); scale值大于1表示放大, scale值小于1表示缩小 案例效果&a…

【图片resize】图片三种缩放方式/letterbox_image实现

文章目录 1 总体简介2 实现效果2.1 直接缩放&#xff0c;不怕变形2.2 不变形缩放/letterbox_image2.2.1 不变形缩放&#xff0c;两端填充灰边2.2.2 不变形缩放&#xff0c;一端填充灰边 3 代码运行 1 总体简介 对图像进行预处理操作的时候&#xff0c;一般有两种缩放方式。 一…

正在解析主机 nginx.org... 失败:域名解析暂时失败。 wget: 无法解析主机地址 “nginx.org”

在安装Nginx的时候遇到如下的问题 正在解析主机 nginx.org… 失败&#xff1a;域名解析暂时失败。 wget: 无法解析主机地址 “nginx.org” 命令如下&#xff1a; [rootlocalhost local]# wget http://nginx.org/download/nginx-1.12.2.tar.gz开始以为是官网不能下载&#xff0c…

安装虚拟机后,主机浏览器访问变慢,显示正在解析主机问题

先找到 控制面板 点击 查看网络状态和任务 选 更改适配器设置 双击它 点 属性 双击第四个选项 都改成自动获取。

CentOS wget命令: 无法解析主机地址 域名解析失败

再使用wget命令中redis.io下载Redis安装包时候报错如下&#xff1a; 百度了许多方法都没有解决&#xff0c;综合各种方式以后&#xff0c;终于给解决了这个问题。方法如下&#xff1a; 首先使用 ifconfig命令查看你的IP地址&#xff0c;如果是这种状态就需要去手动添加 在你的…

问题:正在解析主机 XXX失败:未知的名称或服务。wget: 无法解析主机地址 “XXX”

问题&#xff1a;新安装的ubuntu16.04使用wget命令拉取llvm安装包出错 解决方法&#xff1a; 修改DNS即可 sudo vim /etc/resolv.conf #修改nameserver 127.0.1.1 为 8.8.8.8

wget无法解析主机地址

备份恢复机检查配置好网卡信息后,wget包显示无法解析主机地址 排查过程 ping 外网地址不通 ping 外网IP通 定位可能解析有问题 查看解析服务器信息并修改恢复 vim /etc/sysconfig/network-scripts/ifcfg-eth0 //编辑网络信息 vim /etc/resolv.conf //编辑解析地址 总结&#x…

配置在线 YUM 源仓库时 wget 无法解析主机地址

文章目录 一、现象二、解决 一、现象 配置在线源时&#xff0c;第一步将在线 YUM 源配置文件下载到本地我就卡住了&#xff0c;如下所示&#xff1a; [rootlocalhost ~]# wget -O /etc/yum.repos.d/CentOS-Base.repo https://mirrors.aliyun.com/repo/Centos-7.repo --2021-0…

wget报错处理无法解析主机或者无反应

[rootlocalhost ~]# wget -O /etc/yum.repos.d/CentOS-Base.repo http://mirrors.aliyun.com/repo/Centos-7.repo --2022-12-02 16:57:26-- http://mirrors.aliyun.com/repo/Centos-7.repo 正在解析主机 mirrors.aliyun.com (mirrors.aliyun.com)... 失败&#xff1a;未知的名…

win10如何解决浏览器出现“正在解析主机”的问题,很大原因是虚拟机,虚拟网卡,小米随身wifi导致的,DNS优选下载,

如何解决浏览器出现“正在解析主机”的问题 ,很大原因虚拟机,虚拟网卡,小米随身wifi导致的 方法(一) 1. 把所有的全部禁止; 1.1 很大原因是虚拟网卡导致的,或卸载对应的虚拟机 2. 小米随身WiFi 也是导致网络慢的原因,把小米随身WiFi 拔下来,关点软件;或卸载驱动软件 如果还不行…

CentOS 7 下载yum源报错:正在解析主机 mirrors.aliyun.com (mirrors.aliyun.com)... 失败:未知的名称或服务。

下载yum源报错&#xff1a;未知的名称或服务解决方法 错误信息解决方法 错误信息 正在解析主机mirrors.aliyun.com (mirrors.aliyun.com)… 失败&#xff1a;未知的名称或服务。wget: 无法解析主机地址“mirrors.aliyun.com” 解决方法 解决方法 &#xff1a; 登录root用户…

主机名解析

主机名解析&#xff0c;比如&#xff1a;本地系统将域名(wenlong.wen.com)转换为IP地址(192.168.x.x) ①Unix初期&#xff0c;域名解析很容易&#xff0c;当时计算机网络有4个主机&#xff0c;其中每个主机的名称和地址都放在/etc/hosts这个静态数据库中 ②如今&#xff0c;网…

正在解析主机,路由器打不开个别网页,已解决

在连接路由器的情况下,无论上无线上网,还是网线与路由器直接相连,360浏览器左下角都会经常显示正在解析主机,个别网站能打开,个别网站,有时能打开,有时怎么搞也不行.一般反复重启路由器可以暂时解决问题. 关于通常的解决方案,一般无效: 360急救箱, 重启本地连接或无线连接,重…

正在解析主机 mirrors.aliyun.com (mirrors.aliyun.com)... 失败:未知的名称或服务。wget: 无法解析主机地址 “mirrors.aliyun.com”

找到如下配置文件&#xff1a;/etc/resolv.conf vim /etc/resolv.conf 添加如下源地址&#xff1a; nameserver 8.8.8.8 nameserver 8.8.4.4 nameserver 223.5.5.5 nameserver 223.6.6.6 保存退出。就可以下载啦&#xff01;