首页 > 其他分享 >background-size: cover与background-size: contain

background-size: cover与background-size: contain

时间:2023-12-22 16:44:07浏览次数:27  
标签:图像 cover background contain position size

background-size的可能值

background-size的可能值是autocontain, 和cover.

1、background-size: cover

在这里,图像将被调整大小以适应容器。如果长宽比不一样,那么图像将被屏蔽以适应。

当使用background-size: cover时,请确保考虑图像的长宽比。

2、background-size: contain

在这种情况下,图像将被调整大小以适应容器。如果长宽比不对,那么图像就会被黑边化,如下例所示。

background-size: contain 调整图像的大小以适应容器。

至于background-position,它类似于object-position的工作方式。唯一的区别是,object-position的默认位置与background-position的默认位置不同。

3、background-size: auto

使用auto,图像将保持其默认大小。

请记住,默认尺寸有时可能会导致图像模糊(如果它太小)。

 

 

 

 

标签:图像,cover,background,contain,position,size
From: https://www.cnblogs.com/zwh0910/p/17921944.html

相关文章

  • DevEco Studio 报错only contain [a-zA-z0-9_].
    DevEcoStudio报错onlycontain[a-zA-z0-9_].一、操作环境操作系统: Windows10专业版IDE:DevEcoStudio3.1SDK:HarmonyOS3.1二、错误>hvigorERROR:Failed:entry:default@CompileResource... >hvigorERROR:Toolsexecutionfailed.Error:'��̲1'onlycontain[a-zA......
  • C++(resize())
    在C++中,resize()是一种用于调整容器大小的成员函数,它通常用于std::vector、std::string等标准库容器。这个函数允许你改变容器中元素的数量,可以增加或减少容器的大小。对于std::vector:#include<vector>#include<iostream>intmain(){std::vector<int>myVector......
  • linux kernel modify printk buf size
    linuxkernelmodifyprintkbufsizeconfigureCONFIG_LOG_BUF_SHIFTmodifycode:wyk@ubuntu:~/soc/linux$gitdiffkernel/printk/printk.cdiff--gita/kernel/printk/printk.cb/kernel/printk/printk.cindexfd337bf9b..aaa98a8eb100644---a/kernel/printk/......
  • containerd-wasm-shims k8s 运行webassembly 的containerd shim
    containerd-wasm-shims属于一个包装,基于了runwasi可以实现在k8ss中运行webassembly工作负载,使用上提供了多种wasm应用runtimes以及扩展,同时目前KWasm组织也包装了一个k8soperator实现方便的部署说明基于webassembly的运行模式是越来越多了,大家趋向于与k8s以及容器集成......
  • C++(size_t)
    size_t是C++中的一种数据类型,通常用于表示对象的大小或元素的数量。它是一种无符号整数类型,具体的大小依赖于编译器和系统,但通常被设计为能够表示对象的最大可能大小。特点和用途:无符号整数类型:size_t是一种无符号整数类型,因此它只能表示非负的整数值。与sizeof运算......
  • MySQL:SQL 错误 [1118] [42000]: Row size too large.
    1.场景:今天在用MySQL建表的时候,报了一个错误;SQL错误[1118][42000]:Rowsizetoolarge.Themaximumrowsizefortheusedtabletype,notcountingBLOBs,is65535.Thisincludesstorageoverhead,checkthemanual.YouhavetochangesomecolumnstoTEXTor......
  • simpread-Ubuntu 扩容磁盘、扩容内存_ubuntu 扩容 the file system can not be resize
    原文地址blog.csdn.net参考:Ubuntu磁盘扩容及启动问题整理作者:一只青木呀发布时间:2020-12-0810:42:19网址:https://blog.csdn.net/weixin_45309916/article/details/110850358也可参照正点原子的:Ubuntu磁盘空间不足?一招轻松扩容Ubuntu磁盘扩容(简单亲测有效)Ubuntu......
  • centos7搭建kubernetes-v1.25.1集群(Containerd作为运行时)
    集群配置节点名称内存硬盘处理器内核总数ipmaster6GB40GB6192.168.67.166node16GB40GB6192.168.67.167node26GB40GB6192.168.67.168一、所有节点更改镜像源curl-o/etc/yum.repos.d/CentOS-Base.repo二、所有节点安装docker,注意:K8s在1.24以上......
  • Dependency injection framework -- Decoupled packages example (multiple container
    Dependencyinjectionframeworkhttps://python-dependency-injector.ets-labs.org/index.htmlDependencyInjectorisadependencyinjectionframeworkforPython.Ithelpsimplementingthedependencyinjectionprinciple.KeyfeaturesoftheDependencyInjecto......
  • ModelAndViewContainer、ModelMap、Model、ModelAndView详细介绍【享学Spring MVC】
    前言写这篇文章非我本意,因为我觉得对如题的这个几个类的了解还是比较基础且简单的一块内容,直到有超过两个同学问过我一些问题的时候:通过聊天发现小伙伴都听说过这几个类,但对于他们的使用、功能定位是傻傻分不清楚的(因为名字上都有很多的相似之处)。那么书写本文就是当作一篇科普类......