background-size的使用----图片不同的自适应情况

ゞ浴缸里的玫瑰 2024-04-01 17:39 17阅读 0赞

.box\{

width: 600px;

height: 300px;

border: 1px solid red;

background-image: url("assets/images/banner.jpg");

background-repeat: no-repeat;

background-size: cover; //图片会等比例伸缩铺满整个容器，图像不会变形

\}

![53342ffa46b3445eaa1cf0a200392249.png][]

.box\{

width: 700px;

height: 400px;

border: 1px solid red;

background-image: url("assets/images/banner.jpg");

background-repeat: no-repeat;

background-size: contain; //保持比例，适合容器中的最大大小

\}

![abca83f3303d491ba8686d691eee9c30.png][]

.box\{

width: 700px;

height: 400px;

border: 1px solid red;

background-image: url("assets/images/banner.jpg");

background-repeat: no-repeat;

background-size: auto; //在容器中显示自身的的宽高大小

\}

![3d33ac9995a94383a35b8b10e9de0917.png][]

总结：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmd5aW5pbmcwNzAyMDU_size_16_color_FFFFFF_t_70_pic_center][]

[53342ffa46b3445eaa1cf0a200392249.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/725b789b0caa44fba23d5aa8adf6ba81.png
[abca83f3303d491ba8686d691eee9c30.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/b6693b71adb24f61aaa90c853f08eed3.png
[3d33ac9995a94383a35b8b10e9de0917.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/25bbb65ac81849529d8bf6a19ad60412.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmd5aW5pbmcwNzAyMDU_size_16_color_FFFFFF_t_70_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/69a93208abb845beb9f15f803924137f.png

发表评论取消回复

表情：

评论列表（有 0 条评论，17人围观）

还没有评论，来说两句吧...

相关阅读

相关 background-size的使用----图片不同的自适应情况

.box\{ width: 600px; height: 300px; border: 1px solid red; background-image: url("as

ゞ浴缸里的玫瑰/ 2024年04月01日 17:39/ 0 赞/ 18 阅读

相关 Android 图片自适应

开发中IOS和Android都用的是一套图片接口，这样就造成图片显示比例问题，比如商品列表等等。查询了一些资料给ImageView设置一个属性就可以做到自适配，如下： ![

短命女/ 2024年02月17日 20:47/ 0 赞/ 10 阅读

相关 CSS图片自适应框架

CSS图片自适应框架 ![在这里插入图片描述][20210326100534470.gif] 使用img来设置 <!DOCTYPE html> <

旧城等待，/ 2022年11月13日 06:24/ 0 赞/ 218 阅读

相关图片自适应QLabel大小

coding=utf-8 import sys from PyQt5.QtWidgets import (QWidget, QHBoxLayout,

不念不忘少年蓝@/ 2022年10月28日 10:05/ 0 赞/ 165 阅读

相关关于自适应图片

img上面现在有这两个属性可以使用srcset 和 sizes <img srcset="elva-fairy-320w.jpg 320w, elva

以你之姓@/ 2022年05月01日 12:16/ 0 赞/ 249 阅读

相关响应式图片(自适应图片)

> 在这篇文章中讨论的新特性 — `srcset/sizes/<picture>` — 都已经被新版本的现代浏览器和移动浏览器所支持（包括Edge，而不是IE）。解决的

迷南。/ 2022年03月07日 19:40/ 0 赞/ 276 阅读

相关响应式图片(自适应图片)

> 在这篇文章中讨论的新特性 — `srcset/sizes/<picture>` — 都已经被新版本的现代浏览器和移动浏览器所支持（包括Edge，而不是IE）。解决的

谁践踏了优雅/ 2022年03月07日 19:38/ 0 赞/ 267 阅读

相关页面根据不同宽度自适应不同样式

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][] @media screen and (min-w

忘是亡心i/ 2022年01月14日 22:09/ 0 赞/ 238 阅读

相关图片自适应

.wrapper overflow:hidden width:100% height:0

àì夳堔傛蜴生んèń/ 2021年12月24日 05:27/ 0 赞/ 373 阅读

相关 html背景图片自适应

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR

Dear 丶/ 2021年10月18日 09:22/ 0 赞/ 346 阅读