css img 适配尺寸_CSS——<img>标签图片适配居中问题

本文介绍了如何在HTML中使图片在div内居中显示,包括使用text-align和padding-top,margin属性,以及转换为块元素并设置margin:0 auto。还探讨了图片自动适应DIV容器大小的方法,如设置百分比宽度和高度,以及利用JavaScript进行响应式布局。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

图片标签为,为单闭合标签,使用时花

必选属性:

alt    图像的替代文本

src   规定显示图像的URL

img属于行内替换元素,可以使用height/width/padding/margin均可以使用,效果等效于块元素。如果设定了width但未设置height,那么img的height会根据比例缩放。

如何让图片在div中居中显示?

1、对div使用text-align属性将图片水平居中,同时使用padding-top值使其垂直居中。

2、利用图片的margin属性或者div的padding属性计算后居中。

3、将其转化块元素(display:block)然后对其设置margin:0 auto;

图片自动适应DIV容器大小:

1.设置div容器的大小,里面img的宽度设置为宽和高100%;

2.img的属性是设置一个宽或者高值时,另一个值就会等比例缩放,如果遇到这样的,也可以使用js来判断图片哪个大,然后根据大的值设置固定值,从而使学习图片适配(这种方式也长用在延时加载图片场景,通过js监测窗口的大小来判断加载不同分配率的图片,对于移动设备下载的图片会小一些)。

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>首页</title> <link href="css/style.css" rel="stylesheet" type="text/css"> </head> <body> <div class="box"> <nav> <img src="img/logo.png"> <ul id="nar"> <li class="lis"> <a href="index.html">首页</a> </li> <li class="lis"> <a href="page1.html">热门景点</a> </li> <li class="lis"> <a href="page2.html">特产美食</a> <ul class="lison"> <li><a href="#">特产</a></li> <li><a href="#">美食</a></li> </ul> </li> <li class="lis"> <a href="page3.html">民俗文化</a> <ul class="lison"> <li><a href="#">西河大鼓</a></li> <li><a href="#">吴桥杂技</a></li> <li><a href="#">河北梆子</a></li>> </ul> </li> <li class="lis"> <a href="page4.html">用户调研</a> </li> </ul> <div id="time"></div> </nav> <div class="banner"> <ul class="banner_pic" id="banner_pic"> <li class="current"><img class="one" src="img/p2.jpg" /></li> <li class="pic"><img class="one" src="img/p1.jpg" /></li> <li class="pic"><img class="one" src="img/p3.jpg" /></li> </ul> <ol id="button"> <li class="current"></li> <li class="but"></li> <li class="but"></li> </ol> </div> <table class="city"> <tr> <td><img src="img/p4.jpg"></td> <td><img src="img/p5.jpg"></td> <td><img src="img/p6.jpg"></td> <td><img src="img/p7.jpg"></td> <td><img src="img/p8.jpg"></td> </tr> <tr> <td> <h2>石家庄</h2> </td> <td> <h2>唐山</h2> </td> <td> <h2>张家口</h2> </td> <td> <h2>保定</h2> </td> <td> <h2>秦皇岛</h2> </td> </tr> </table> <h1>——<span>河北宣传片</span>——</h1> <div class="video"> <video src="img/shipin.mp4" controls></video> <p>这片土地既丰富又神秘<br> 没有人知道<br> 还有多少未知的物种等待去发现<br> 而即便是那些已经被广泛知晓的物种<br> 以我们目前的认知<br> 也仅仅只掌握了密码的一小部分<br> 每种生命都是复杂而珍贵的<br> 尊重和爱护它们的密码<br> 也是在保护我们自身的未来<br> 人们未来美好生活的蓝图<br> 建立在生物多样性的繁盛之上<br> 这张蓝图宏伟且谦卑<br> 它既承载着中国智慧<br> 也承载着世界生态文明的未来<br> <span>视频来源:河北文旅</span> </p> </div> <footer> <div> <p>电话:1234567890<br> 邮箱:6666666@163.com<br> </p> <img src="img/logo.png"> </div> <p style="text-align: center;">©河北文旅</p> </footer> </div> <script src="js/js.js"></script> </body> </html>每行代码都是什么意思,每行代码全部打出来
06-06
<form action="xxx.jsp" method="post" > <table width="500"> <style> body { display: grid; place-content: center; min-height: 100vh; margin: 20px; font-family: 'Microsoft YaHei', sans-serif; font-size: 16px; } table { border-spacing: 10px; } </style> <tr> <td><b style="font-size: 16px;">性别</b></td> <td> <input type="radio" id="man" name="sex"/> <label for="man"><img src="images/man.jpg"> 男 </label> <input type="radio" id="women" name="sex"/> <label for="women"><img src="images/women.jpg"> 女 </label> </td> </tr> <tr> <td><b>生日</b></td> <td> <select name="year"> <option selected="selected">--请选择年--</option> <option>1990</option> <option>2000</option> <option>2010</option> </select> <select name="month"> <option selected="selected">--请选择月--</option> <option>1</option> <option>2</option> <option>3</option> </select> <select name="day"> <option selected="selected">--请选择日--</option> <option>11</option> <option>12</option> <option>13</option> </select> </td> </tr> <tr> <td><b>所在地区</b></td> <td> <input type="text" value="安徽" name="area"> </td> </tr> <tr> <td><b>婚姻状况</b></td> <td> <input type="radio" name="marital_status" id="spinsterhood"> <label for="spinsterhood"> 未婚 </label> <input type="radio" name="marital_status" id="married"> <label for="married"> 已婚 </label> <input type="radio" name="marital_status" id="divorce"> <label for="divorce"> 离婚 </label> <input type="radio" name="marital_status" id="secret"> <label for="secret">保密</label> </td> </tr> <tr> <td><b>学历</b></td> <td><input type="text" name="edu_bg"></td> </tr> <tr> <td><b>喜欢的类型</b></td> <td> <input type="checkbox" name="like_type" id="wumei"> <label for="wumei"> 妩媚的 </label> <input type="checkbox" name="like_type" id="keai"> <label for="keai"> 可爱的 </label> <input type="checkbox" name="like_type" id="xiaoxianrou"> <label for="xiaoxianrou"> 小鲜肉 </label> <input type="checkbox" name="like_type" id="laolarou"> <label for="laolarou"> 老腊肉 </label> <input type="checkbox" name="like_type" id="douxihuan"> <label for="douxihuan"> 都喜欢 </label> </td> </tr> <tr> <td><b>自我介绍</b></td> <td> <textarea cols="30" rows="10" name="self_introduction"></textarea> </td> </tr> <tr> <td colspan="2" style="text-align: center;"> <input type="submit" value=" 免费注册 "> </td> </tr> </table> </fieldset> </form>
04-01
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值