html_css_尺寸调整/调整图片样式(img/max-widht/object-fit)
文章目录
- html_css 尺寸调整/调整图片样式
- 图片元素``和图片背景`元素的background属性`的基本区分
- `html_`元素
- replaced elements
- Width and height
- size of box(img元素盒模型)
- Using percentages(使用百分比来调整大小
- Percentage margins and padding(盒模型的外边距/内衬内边距)
- 利用 css 调整图片大小
- max-width 属性
- 效果
- object-fix
- 演示代码
- 辨析object-fit
- 演示代码
- 演示代码object-fit各种属性
- 演示代码html中img
- reference
html_css 尺寸调整/调整图片样式
图片元素<img>和图片背景元素的background属性的基本区分
- 注意图片元素和图片背景的区别
- 图片元素与图片背景尤为不同的是accessibility(如alt属性)和SEO
- 图片元素(img可以进行圆角等操作)
- 图片背景(background无法直接进行圆角操作,只有在被背景足够大,可以借助background元素来进行圆角裁切)
html_<img>元素
replaced elements
- Elements like
<img>and<video>are sometimes referred to as replaced elements . - This is because the element’s content and size are defined by an external resource (like an image or video file), not by the contents of the element itself.
- You can read more about them at Replaced elements.
Width and height
- Width and height of img
size of box(img元素盒模型)
- the
intrinsic sizeof the element — its size is defined by its content. - give elements in our design a specific size:When a size is given to an element (the content of which then needs to fit into that size) we refer to it as an extrinsic size
Due to this problem of overflow, fixing the height of elements with lengths or percentages is something we need to do
very carefullyon the web.
- 你可以通过设置html上的width和height来改变图片的尺寸(拉伸/压缩)
- 尽管如此,这两个属性应该用以表示图片的本征大小,而不建议您使用这两个属性来方所图片!(这容易导致图片的横纵比被破坏,图片看起来很扭曲),而应该在将图片放到网页前就用图片工具调整好尺寸!
Using percentages(使用百分比来调整大小
Using percentages
明确百分比的含义是重要的,特别是当某个具有固定 height 的容器(虽然我们一般不会去设定高度,而是让高度自动的内容或者子元素共同撑开,但是在特定场合下,会出现限定具体容器高度的情况)中包含了内容以及多个子元素;
此时,若某个子元素的高度如果设定为百分比,特别是当该元素为较大图片的时候,图片元素之前(上方)安排的内容(高度)变化不定,这时候有可能出现图片溢出固定高度容器的现象;(图片是否溢出父容器不单单取决于图片本身,还受兄弟元素内容等因素的影响,其他元素也是类似)
有些布局技术(例如 flex)可以收缩元素
- In many ways, percentages act like length units, and as we discussed in the lesson on values and units, they can often be used interchangeably with lengths.
- When using a percentage you need to be aware what it is a percentage of .
- In the case of a box inside another container, if you give the child box a percentage width it will be a percentage of the width of the parent container.
- This is because percentages resolve against the size of the containing block.
- With no percentage applied our
<div>would take up 100% of the available space, as it is a block level element. - If we give it
a percentage width, this becomes a percentage of the space it would normally fill.
Percentage margins and padding(盒模型的外边距/内衬内边距)
统一以父容器的宽度为百分比的基准
- When you use margin and padding set in percentages, the value is calculated from the inline size(水平书写语种的行的逻辑属性) of the containing block — therefore the width when working in a horizontal language.
- In our example, all of the margins and padding are 10% of the
width(width of parent container box). This means you can haveequal-sized margins and paddingall around the box.
- This is a fact worth remembering if you do use percentages in this way.
.box { border: 5px solid darkblue; width: 40%; margin: 20%; padding: 10%; }<div class="box">I have margin and padding set to 10% on all sides.</div>
利用 css 调整图片大小
max-width 属性
<!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: 200px;}.minibox {width: 50px;}.width {width: 100%;}.max {max-width: 100%;}.max_80per {max-width: 80%;/* width: 90%; */}div {border: solid;}img {border: dotted red;/* 不让边框辅助线溢出容器
html_css_尺寸调整/调整图片样式(img/max-widht/object-fit)相关推荐
- php 调整背景图片尺寸,background-size背景图片尺寸属性
background-size语法 w3c对background-size的语法规定如下:属性名:background-size 属性值:* 其中 bg-size = [ | | auto ]{1,2 ...
- Python|xlwt|xlrd|调整单元格样式（背景，字体，对齐、虚线边框、列宽行高、添加公式）|xlutils|openpyxl|只读与只写|图表|语言基础50课：学习（8）
文章目录 系列目录 原项目地址 第24课:用Python读写Excel文件-1 Excel简介 安装 读Excel文件(行列索引从`0`开始) 写Excel文件 调整单元格样式(背景,字体,对齐.虚线 ...
- OpenCV——Python：像素调整、图片裁剪、形状与文字设置3
像素调整与图片裁剪 import cv2img = cv2.imread("2.jpg") # 读取图像 print(img.shape) # 查看图像长,宽,通道数imgResi ...
- 计算机考试照片在线处理,全国普通计算机等级考试照片尺寸 在线调整的方法...
原标题:全国普通计算机等级考试照片尺寸 在线调整的方法 在报考全国普通计算机等级考试的时候,需要根据全国计算机等级考试照片要求来上传合适的证件照,避免造成上传失败,无法正常参加考试的情况出现,全国普通 ...
- latex里图片大小如何调整_LATEX图片位置调整
LATEX 中图片的位置任意调整 1. 图片位置任意调整: 插入名字为" c5 "的图片,并放在文章页面的右侧 %--------------------------------- ...
- Android调整Bitmap图片大小
#Android调整Bitmap图片大小 /*** 调整图片大小* * @param bitmap* 源* @param dst_w* 输出宽度* @param dst_h* 输出高度* @retur ...
- react根据浏览器的尺寸动态调整布局
react根据浏览器的尺寸动态调整div react实现关键代码 // 设置状态 state = {deskDivWidth:800px;deskHeight: document.body.clien ...
- PDF尺寸怎么调整？两个实用途径
相信小伙伴们对PDF格式的文件都很熟悉,虽然PDF文件的兼容性不错,但有时也会因为PDF文件的尺寸不统一或者部分内容方向不对而造成一些问题,那么如何调整PDF尺寸呢?下面就给大家聊聊没有电脑也能用手机 ...
- python 使用 openpyxl 批量调整字体和样式
python 使用 openpyxl 批量调整字体和样式 修改字体样式 Font(name,size,bold,italic,color) 获取表格中格子的字体样式 设置对齐样式 Alignment( ...
- 不激活Win10调整任务栏样式
请支持正版, 在日常使用机器上购买正版并激活Windows操作系统 某些场景下(例如VM环境), windows实例存活时间较短, 激活不是很划算. 此时想要调整任务栏样式, 例如不合并按钮等, 则需 ...
最新文章
- Web开发经验谈之F12开发者工具/Web调试[利刃篇]
- python适合做后端开发吗-pythonWeb后端开发好呢？还是从事网络爬虫比较好呢？
- poj3252 组合数学
- 6、oracle数据库下查询操作
- lan口配置 petalinux_PetaLinux开发文档
- Python爬虫都被你用来爬妹子图了，我等羞愧与之为伍！
- matlab gui界面画三角形,新手，用gui界面画李萨如图，出错，求解答
- 从零实现深度学习框架——自动求导神器计算图
- 你的六岁在玩儿泥巴，他们六岁已经在讲算法了
- 搭建内网穿透工具-ngrok
- 海思SD3403开发板
- 计算机最低配置有哪些,win10对电脑配置有哪些要求？win10最低配置要求
- 趣谈implicit instantiation of undefined template
- 华为鸿蒙2.0开发文档及API
- Python——字典的遍历
- 男人的最高品位在于选择女人
- “互联网+”时代保险公司经营管理模式研究
- 第3章 你应该如何运行程序 （可选，Shell、IDE介绍，推荐看一下）
- iptable_netfilter介绍以及简单代码分析
- 解决CentOS被wbew挖矿程序入侵的方法
热门文章