对图片的css配置的效果与直接在标签中配置属性效果的不同

理解CSS与HTML图片大小设置差异
最新推荐文章于 2025-12-01 21:03:28 发布
原创 最新推荐文章于 2025-12-01 21:03:28 发布 · 519 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css

本文探讨了使用CSS和HTML img标签设置图片大小时的不同表现，通过具体实例展示了为何在页面上显示图片大小不一致的问题，并提供了解决方案。
一张1024 x 768的图片，如果用css 配置height,width分别为100px,77px，在页面中显示还会是1024 x 768，而如果在img标签中配置style中的height,width,同样的值，却能得到想要的结果，先留在这里，等找到答案再编辑一下吧
jefffyang
关注
css 背景图和img 标签的区别
weixin_39458031的博客
08-10 2551
关于背景图background 和img 的 加载顺序 本人之前认为css背景图与直接插入img图片的效果是差不多的，但是发现其实是错误的，二者区别如下： 在网页加载过程中，以css背景存在的图片会等到html结构加载完成才开始加载，而html中的img标签是网页结构（内容）的一部分会在加载结构的过程中加载。 所以，理论上，背景图会加载的晚一些。 具体项目具体看情况，希望对大家有帮助 ...
CSS属性和HTML标签属性的区别
weixin_34216107的博客
02-03 841
在DHTML和JAVASCRIPT编程中，都会用到大量STYLE或属性来设置页面效果和元素特性的。比如非常常用的ALIGN、SIZE、WIDTH、FONT-COLOR等，不过其中在CSS和DHTML属性的不同可能会导致一些设置出错或无效的时候。 1、 cursor:pointer!important;cursor:hand; 在TD等HTML元素中作为S...
内联式css样式，直接写在现有的HTML标签中
CTI技术与呼叫中心设计
10-31 1512
CSS样式可以写在哪些地方呢？从CSS 样式代码插入的形式来看基本可以分为以下3种：内联式、嵌入式和外部式三种。这一小节先来讲解内联式。 内联式css样式表就是把css代码直接写在现有的HTML标签中，如下面代码： 这里文字是红色。 注意要写在元素的开始标签里，下面这种写法是错误的： 这里文字是红色。style="color:red"> 并且css样式代码要写在style="
CSS3制作可自定义配置箭头的气泡提示框效果源码.zip
11-02
【标题】中的“CSS3制作可自定义配置箭头的气泡提示框效果源码”表明这个压缩包包含了一个使用CSS3技术实现的、能够自定义箭头样式和位置的气泡提示框的代码示例。这样的效果通常用于网页设计中，为用户提供信息提示...
jQuery+CSS实用图片收缩与放大效果插件.rar
07-08
使用CSS3，我们可以创建平滑的过渡动画，使图片在收缩和放大过程中看起来更加自然。例如，可以使用`transition`属性定义变化过程的持续时间、速度曲线和目标属性，如`transition: width 0.5s ease, height 0.5s ease...
VSCode代码自动补全html标签、css属性及值 - 无插件
热门推荐
草巾冒小子的博客
09-24 20万+
不需要插件，VSCode代码自动补全（html标签、style样式、css属性及值、），修改配置文件即可完成！ 效果图 · 演示如下： 操作步骤 · 如下： 本编辑器已经汉化，所以截图如下。 首先，取消选中（控制在活动代码片段内是否禁用快速建议） 修改路径（截图示下）： 设置 --> 文本编辑器 （建议）--> 取消选中 Suggest:Snippets Prevent Q...
纯CSS3实现圆角效果（含IE兼容解决方法）
09-25
CSS3圆角技术是现代网页设计中非常普遍且实用的样式之一，它能够帮助开发者和设计师轻松创造出美观的视觉效果，而不必借助图片。通过使用纯CSS代码，我们可以为网页中的元素创建圆角矩形，这不仅减少了页面的加载...
jQuery+css实现图片滚动效果(附源码)
10-27
在CSS部分，需要设置轮播组件的样式，比如宽度、高度、间距、边框等属性，以匹配页面的布局和视觉效果。还可以利用CSS为控制按钮添加样式，比如设置按钮的大小、位置、背景图片等。 #### 5. JavaScript实现 使用...
html css js网页制作成品——娃娃html+css+js 4页附源码
卡拉米
12-01 42
本文介绍了一个关于中国篆刻艺术的静态网站设计与实现方案。网站采用HTML5+CSS3技术构建，包含首页、关于篆刻、作品展示、历史渊源和联系我们等页面模块。文章详细说明了网站布局结构、程序语言选择、素材处理方法以及文件组织方式，并提供了核心HTML代码示例。网站设计兼容主流浏览器，适合修改为各类主题展示网站。作者还分享了编程学习建议，推荐初学者通过刷题巩固基础，并提供了获取更多前端开发资源的渠道。该网站可作为大学生毕业设计或期末作业的参考模板。
主题切换（1）：css变量的使用（:root）
Z_Wonderful的博客
12-01 245
:root 是一个伪类选择器，它匹配文档的根元素（即 <html> 元素）。使用 :root 定义 CSS 变量（自定义属性）可以让变量具有全局作用域，方便在整个项目中统一管理和动态调整样式
Vue项目中 安装及使用Sass（scss）
2509_94216583的博客
12-01 225
为什么会有这个安装方法，是因为我在使用常规安装方法时，会出现版本不兼容问题，导致安装失败，所以 尝试了一个新的方法，如下。的版本，因为它会根据 npm 依赖项自动安装合适的版本。项目就可以正常使用sass啦~：nodejs环境中将sass转css。2.在这个配置中，你不需要指定。：把 sass编译成css。
html css js网页制作成品——鹿晗html+css+js 4页附源码
卡拉米
12-01 438
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；
主题切换（2）：CSS 变量（自定义属性）
Z_Wonderful的博客
12-01 794
系统主题切换。在大型项目中，为了更好地组织 CSS 变量（自定义属性）、主题切换，通常会将变量定义在单独的文件中，然后在需要的地方引入。这样可以实现全局变量的统一管理，同时保持代码的可维护性。
html css js网页制作成品——html+css+js5 页 jk制服附源码
卡拉米
11-21 991
本文介绍了一个关于中国篆刻艺术的静态网站设计与实现方案。网站采用HTML5+CSS3技术构建，包含首页、作品展示、历史渊源等二级页面，采用浮动布局兼容主流浏览器。内容涉及HTML结构代码示例，包括导航栏、banner区和作品展示画廊的实现。文章还提供了学习建议，推荐编程初学者通过刷题巩固基础。网站素材包含精选图片资源，文件结构清晰，可使用多种编辑器进行修改。该模板可灵活应用于美食、旅游等多种主题的展示型网站开发，适合作为学习参考或毕业设计项目。
【CSS】如何选择父级元素？
纠缠AI的亮子
12-01 605
无法直接选择父级。通常通过重新设计 CSS 规则来避免这个需求，或者让子元素间接影响父元素布局。最灵活和兼容性最好的方法，可以完全控制 DOM。:has()这是 CSS 自身提供的“父级选择器”能力，强大且符合 CSS 的声明性，但需要注意浏览器兼容性。在选择方法时，优先考虑标准 CSS 和:has()伪类，因为它们是声明性样式，更容易维护。只有在它们无法满足需求时，才考虑使用 JavaScript。
Tailwind CSS 实战
pan303507479的博客
12-01 443
Tailwind CSS 实战
脚本网页 推理游戏
最新发布
2401_82519096的博客
12-01 188
单页面即玩。
日历生成逻辑
wusandaofwy的博客
12-01 214
比如 获得2025年11月最后一天（也就是11月有几天）比如 获得2025年10月最后一天（也就是10月有几天）
利用WOWjs与AnimateCSS在网页滚动时添加动画效果
1. 引入WOWjs和AnimateCSS库：为了使用这些库，需要在页面中通过`<script>`和`<link>`标签引入WOWjs和AnimateCSS的资源文件。 2. 初始化WOWjs实例：在文档加载完成后，需要创建WOWjs实例并指定配置选项（如果有的话...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值