html设置图片的宽高

 

一、HTML标签内控制宽度高度 

      img标签自带的属性:width和height;   

      例如:    <img src='图片地址' width:150; heght:150; />

      注意:通过img标签自带属性设置宽高不需要加单位,默认是px;

二、CSS样式控制width、height 

      通过css样式进行设置图片的宽高,样式名依旧是:width和height

      例如:

            <style> 

                  #img的id{ width:300px; height:100px} 

            </style> 

      注意:通过css设置宽高需要写单位,不要忘了!

 

三、扩展知识:
       CSS类命名+空格+标签 或者 CSS类命名+空格+CSS命名+空格+CSS命名这样表达式DIVCSS5叫CSS指针

 

原文地址:http://www.divcss5.com/wenji/w408.shtml      

 

使用 CSS 设置图片比有多种方法,以下为你详细介绍: #### 使用 `padding-bottom` 实现 通过设置父元素的 `padding-bottom` 来固定比,将图片设置度 100% 以填充父元素。 ```html <div class="img-wrapper"> <img src="your-image-url" class="image"> </div> ``` ```css .img-wrapper { overflow: hidden; width: 100%; height: 0; /* 让图片比为 16:9 */ padding-bottom: 56.25%; } .image { width: 100%; } ``` 这种方式可以让图片在不同屏幕尺寸下保持固定的比,例如设置 `padding-bottom: 56.25%` 可实现 16:9 的比[^2]。 #### 使用 `aspect-ratio` 属性 这是 CSS 新特性,直接为图片或其容器设置比。 ```html <img src="your-image-url" class="image"> ``` ```css .image { width: 100%; aspect-ratio: 16 / 9; } ``` 使用 `aspect-ratio` 属性可以简洁地设置图片比,如 `aspect-ratio: 16 / 9` 就是设置为 16:9 的比。 #### 背景图片设置比 对于通过 CSS 的 `background-image` 设置的背景图片,可利用 `padding-bottom` 实现比,同时使用 `background-size` 使背景图片覆盖整个元素区域。 ```html <div class="box"></div> ``` ```css .box { width: 50%; margin: 100px auto; background-color: pink; position: relative; /* 对应 4:3 的比 */ padding-bottom: 75%; background-image: url('your-image-url'); background-size: cover; } ``` 上述代码通过 `padding-bottom: 75%` 实现 4:3 的比,`background-size: cover` 确保背景图片覆盖整个元素区域[^1][^3][^4]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值