img { //只需要设置图片自适应最大宽高就行 max-width: 160px; max-height: 150px; }
css img图片在一个盒子里面自适应
2022-11-29
256
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《
阿里云开发者社区用户服务协议》和
《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写
侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：
css img图片在一个盒子里面自适应
目录
相关文章
|
12天前
|
前端开发
算法
Java
【CSS】前端三大件之一，如何学好？从基本用法开始吧！（四）：元素盒子模型；详细分析边框属性、盒子外边距
盒模型
盒模型：
所谓盒模型，就是浏览器为页面中的每个HTML元素生成的矩形盒子。
这些盒子们都要按照可见板式模型在页面上排布。
可见的板式模型主要由三个属性控制：position 属性、display 属性和 float属性。
position属性控制页面上元素间的位置关系。
display属性控制元素是堆叠、并排或者不在页面上显示。
float属性提供控制的方法，以便于把元素组成成多栏布局。
盒模型讲解：
在默认的情况下，每个盒子的边框是不可见的，背景也是透明的。
所以我们
不能直接的看到页面中的盒
68
0
1
|
3月前
|
前端开发
WebView2 控件（基于 Microsoft Edge (Chromium) 的嵌入式浏览器控件），保存资源(图片、脚本、CSS)
WebView2 控件（基于 Microsoft Edge (Chromium) 的嵌入式浏览器控件），保存资源(图片、脚本、CSS)
222
46
48
|
4月前
|
计算机视觉
Python
|
11月前
|
前端开发
在Webpack配置文件中，如何配置loader以处理其他类型的文件，如CSS或图片
在Webpack配置文件中，通过设置`module.rules`来配置loader处理不同类型的文件。例如，使用`css-loader`和`style-loader`处理CSS文件，使用`file-loader`或`url-loader`处理图片等资源文件。配置示例：在`rules`数组中添加对应规则，指定`test`匹配文件类型，`use`指定使用的loader。
537
8
8
|
4月前
|
前端开发
JavaScript
容器
制作b超单生成器， 假怀孕b超单图片制作， p图医院证明【css+html+js装逼恶搞神器】
本资源提供一个适合用于熟人之间恶搞的工具，效果逼真，仅供学习参考与娱乐。包含前端技术学习要点：语义化布局、响应式设计、Flexbox、图片自适应
438
0
0
|
10月前
|
JavaScript
容器
jquery和CSS3图片排序过滤搜索插件
Filterizr是一款jquery和CSS3图片排序过滤插件。它可以对一组图片进行排序，按条件过滤和按关键字搜索。并在显示结果时使用指定的CSS3动画过渡效果。
127
2
2
|
11月前
|
编解码
前端开发
UED
探讨了CSS媒体查询在移动端开发中的应用，介绍了媒体查询的基本概念、常见条件及其在响应式布局、导航菜单、图片优化和字体调整等方面的具体应用
本文深入探讨了CSS媒体查询在移动端开发中的应用，介绍了媒体查询的基本概念、常见条件及其在响应式布局、导航菜单、图片优化和字体调整等方面的具体应用。通过实际案例分析和注意事项的讨论，旨在帮助开发者更好地理解和运用媒体查询，提升移动端用户体验。
242
4
4
|
11月前
|
Web App开发
前端开发
容器
css布局之左侧固定右侧自适应布局
1233
0
0
|
4月前
|
存储
自然语言处理
前端开发
抖音快手小红书虚拟评论截图生成器，模拟对话制作工具，html+js+css
这是一款纯前端实现的多平台虚拟评论生成器，支持抖音、快手、小红书风格，适用于产品演示与UI设计。采用Vanilla JS与Flexbox布局，利用IndexedDB存储数据，CSS Variables切换主题。
687
2
2
热门文章
最新文章
1
【CSS】前端三大件之一，如何学好？从基本用法开始吧！（六）：全方面分析css的Flex布局，从纵、横两个坐标开始进行居中、两端等元素分布模式；刨析元素间隔、排序模式等
2
【CSS】前端三大件之一，如何学好？从基本用法开始吧！（五）：背景属性；float浮动和position定位；详细分析相对、绝对、固定三种定位方式；使用浮动并清除浮动副作用
3
【CSS】前端三大件之一，如何学好？从基本用法开始吧！（八）：学习transition过渡属性；本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
4
【CSS】前端三大件之一，如何学好？从基本用法开始吧！（一）：CSS发展史；CSS样式表的引入；CSS选择器使用，附带案例介绍
5
【CSS】前端三大件之一，如何学好？从基本用法开始吧！（四）：元素盒子模型；详细分析边框属性、盒子外边距
6
【CSS】前端三大件之一，如何学好？从基本用法开始吧！（二）：CSS伪类：UI伪类、结构化伪类；通过伪类获得子元素的第n个元素；创建一个伪元素展示在页面中；获得最后一个元素；处理聚焦元素的样式
7
（CSS）使用Flex布局，帮助你快速了解各种基本的Flex布局属性以及帮你让元素快速达到布局中的指定位置！
8
【CSS】前端三大件之一，如何学好？从基本用法开始吧！（七）：学习ransform属性；本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
9
【CSS】前端三大件之一，如何学好？从基本用法开始吧！（九）：强势分析Animation动画各类参数；从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面，完全了解CSS3 Animation
10
【CSS】前端三大件之一，如何学好？从基本用法开始吧！（三）：元素继承关系、层叠样式规则、字体属性、文本属性；针对字体和文本作样式修改
1
【CSS】前端三大件之一，如何学好？从基本用法开始吧！（九）：强势分析Animation动画各类参数；从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面，完全了解CSS3 Animation
36
2
【CSS】前端三大件之一，如何学好？从基本用法开始吧！（八）：学习transition过渡属性；本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
94
3
【CSS】前端三大件之一，如何学好？从基本用法开始吧！（七）：学习ransform属性；本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
48
4
（CSS）使用Flex布局，帮助你快速了解各种基本的Flex布局属性以及帮你让元素快速达到布局中的指定位置！
50
5
【CSS】前端三大件之一，如何学好？从基本用法开始吧！（六）：全方面分析css的Flex布局，从纵、横两个坐标开始进行居中、两端等元素分布模式；刨析元素间隔、排序模式等
135
6
【CSS】前端三大件之一，如何学好？从基本用法开始吧！（五）：背景属性；float浮动和position定位；详细分析相对、绝对、固定三种定位方式；使用浮动并清除浮动副作用
113
7
【CSS】前端三大件之一，如何学好？从基本用法开始吧！（四）：元素盒子模型；详细分析边框属性、盒子外边距
68
8
【CSS】前端三大件之一，如何学好？从基本用法开始吧！（三）：元素继承关系、层叠样式规则、字体属性、文本属性；针对字体和文本作样式修改
36
9
【CSS】前端三大件之一，如何学好？从基本用法开始吧！（二）：CSS伪类：UI伪类、结构化伪类；通过伪类获得子元素的第n个元素；创建一个伪元素展示在页面中；获得最后一个元素；处理聚焦元素的样式
69
10
【CSS】前端三大件之一，如何学好？从基本用法开始吧！（一）：CSS发展史；CSS样式表的引入；CSS选择器使用，附带案例介绍
81