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

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

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

必选属性:

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
<php> $affected_tooling = is_array($list['affected_tooling']) ? $list['affected_tooling'] : explode(',', $list['affected_tooling']); </php> <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Internal Engineering Change Notice (ECN) Requests</title> <style> .container { margin: auto; border: 1px solid #ccc; padding: 20px 20px 0px 20px; font-family: Arial, sans-serif; } h2 { text-align: center; } .header { display: flex; /* justify-content: space-between; */ align-items: center; margin-bottom: 20px; } .header-info { font-size: 14px; } .form-group { display: flex; margin-bottom: 15px; } /* 容器样式 */ .form-row { justify-content: space-between; /* 让子元素分布在两侧 */ display: flex; gap: 5px; /* 列之间的间距 */ margin-bottom: 15px; } .form-row .form-group { display: flex; } label { display: inline-block; width: 300px; font-weight: normal; } input[type="text"], input[type="date"], input[type="time"] { width: 200px; padding: 5px; } .checkbox-group { display: flex; align-items: center; } /* 控制复选框组内部间距 */ .checkbox-group label { margin-right: 5px; /* 每个复选框之间的间距 */ width: 60px; } .checkbox-group label { font-weight: normal; margin-right: 5px; } .section { margin-top: 20px; padding-top: 10px; border-top: 1px solid #ccc; } .footer { margin-top: 30px; display: flex; justify-content: space-between; font-size: 12px; color: #555; } .col { display: flex; align-items: center; white-space: nowrap; } .col input[type="text"] { padding: 2px; box-sizing: border-box; } .col label { white-space: nowrap; margin-right: 1px; } .approval-table { width: 100%; border-collapse: collapse; margin-bottom: 20px; font-weight: normal; } .approval-table th, .approval-table td { padding: 10px; border: 1px solid #ccc; vertical-align: top; } .approval-table th { background-color: #f5f5f5; text-align: left; } .checkbox-container { display: flex; flex-wrap: wrap; gap: 15px; } .checkbox-row { display: flex; align-items: center; gap: 10px; flex: 0 0 48%; /* 控制每行两个选项 */ } .checkbox-row.full-width { flex: 0 0 100%; /* Others 行占满整行 */ } .checkbox-row input[type="text"] { flex: 1; padding: 5px; width: 200px; } .checkbox-row label { font-weight: normal; white-space: nowrap; } .footer-page-break { /*分页,兼容旧浏览器*/ page-break-after: always; } .center-text { display: flex; justify-content: center; /* 水平居中 */ align-items: center; /* 垂直居中 */ } label span { font-weight: normal; text-decoration: underline; } </style> </head> <body> <div> <div class="center-text"> <div style="width:980px;text-align:left;"> <div class="container" layoutH="56"> <div class="header" style="display: flex; justify-content: space-between; align-items: center;"> <img src="__PUBLIC__/Images/logo.gif" alt="Logo" style="height: 50px;"> <strong>TCN No:{$list.tcn_no} </strong> </div> <div class="header" style="justify-content: center;"> <h2>Tooling Change Notice (TCN)</h2> </div> <div class="form-group"> <!-- 第一列:Requested by --> <div class="col"> <label>Requested by #:<span>{$list.requested_by}</span></label> </div> <!-- 第二列:单选 --> <div class="col checkbox-group" style="justify-content: flex-start; padding-left: 5px;"> <label> <input type="radio" name="requested_department" id="ME" value="ME" <if condition="$list.requested_department eq 'ME'">checked</if>/> <label for="ME" style="margin-left: 1px;">ME</label> </label> <label> <input type="radio" name="requested_department" id="PE" value="PE" <if condition="$list.requested_department eq 'PE'">checked</if>/> <label for="PE" style="margin-left: 1px;">PE</label> </label> <label> <input type="radio" name="requested_department" id="QA" value="QA" <if condition="$list.requested_department eq 'QA'">checked</if> /> <label for="QA" style="margin-left: 1px;">QA</label> </label> <label> <input type="radio" name="requested_department" id="PMC" value="PMC" <if condition="$list.requested_department eq 'PMC'">checked</if> /> <label for="PMC" style="margin-left: 1px;">PMC</label> </label> </div> </div> <!-- 下一行:Date --> <div style="margin-top: 15px;"> <label>Issue Date (MM/DD/YYYY):<span>{$list.issue_date}</span></label> </div> <div class="section"> <h4>Part A: General Project and Change Information (Fill by Requestor):</h4> <div class="form-row"> <label>PNG Part No.:<span>{$list.png_part_no}</span></label> <label style="margin-left: 10px;">Customer:<span>{$list.customer}</span></label> <div class="form-group"> <label>W/O:<span>{$list.wo}</span></label> </div> </div> </div> <div class="section"> <h4>Part B: Change Description (Fill by Requestor):</h4> <div class="form-group"> <label>Purpose:</label> <div class="col"> <label> <input type="radio" name="purpose_option" id="Tooling Update" value="Tooling Update" <if condition="$list.purpose_option eq 'Tooling Update'">checked</if> /> <label for="Tooling Update" style="margin-left: 1px;width: 100px;">Tooling Update</label> </label> <label> <input type="radio" name="purpose_option" id="Test tooling" value="Test tooling" <if condition="$list.purpose_option eq 'Test tooling'">checked</if>/> <label for="Test tooling" style="margin-left: 1px;">Test tooling</label> </label> <label> <input type="radio" name="purpose_option" id="Rework tooling" value="Rework tooling" <if condition="$list.purpose_option eq 'Rework tooling'">checked</if> /> <label for="Rework tooling" style="margin-left: 1px;">Rework tooling</label> </label> </div> </div> <div class="form-group"> <label>Reason of change:</label> <textarea name="reason_of_change" id="reason_of_change" rows="3" cols="82" lookupGroup="LookupCCEmail" look_name="LookupCCEmail.orgName">{$list.reason_of_change}</textarea> </div> <div class="form-group"> <label>Tooling change description:</label> <textarea name="tooling_change_description" id="tooling_change_description" rows="3" cols="82" lookupGroup="LookupCCEmail" look_name="LookupCCEmail.orgName">{$list.tooling_change_description}</textarea> </div> <div class="form-group" style="display: block;"> <label style="width: 300px;">Remarks / Affected process:</label> <h5>Affected tooling:</h5> <div class="checkbox-container"> <!-- 每行两个复选框 --> <div class="checkbox-row"> <input name="affected_tooling[]" type="checkbox" id="inner_ldi" value="inner_ldi" <if condition="in_array('inner_ldi', $affected_tooling)"> checked="checked"</if>> <label for="inner_ldi">Inner LDI program</label> </div> <div class="checkbox-row"> <input name="affected_tooling[]" type="checkbox" id="inner_aoi" value="inner_aoi" <if condition="in_array('inner_aoi', $affected_tooling)" >checked</if>> <label for="inner_aoi">Inner layer AOI</label> </div> <div class="checkbox-row"> <input name="affected_tooling[]" type="checkbox" id="pluritec" value="pluritec" <if condition="in_array('pluritec', $affected_tooling)" >checked</if>> <label for="pluritec">Pluritec program</label> </div> <div class="checkbox-row"> <input name="affected_tooling[]" type="checkbox" id="conformal_mask" value="conformal_mask" <if condition="in_array('conformal_mask', $affected_tooling)">checked</if>> <label for="conformal_mask">Conformal mask LDI program</label> </div> <div class="checkbox-row"> <input name="affected_tooling[]" type="checkbox" id="drill" value="drill" <if condition="in_array('drill', $affected_tooling)" >checked</if>> <label for="drill">Drill program</label> </div> <div class="checkbox-row"> <input name="affected_tooling[]" type="checkbox" id="hole_laser" value="hole_laser" <if condition="in_array('hole_laser', $affected_tooling)" >checked</if>> <label for="hole_laser">Hole / Laser AOI & Hole counter program</label> </div> <div class="checkbox-row"> <input name="affected_tooling[]" type="checkbox" id="buttonplate" value="buttonplate" <if condition="in_array('buttonplate', $affected_tooling)" >checked</if>> <label for="buttonplate">Buttonplate / Copper fill LDI program</label> </div> <div class="checkbox-row"> <input name="affected_tooling[]" type="checkbox" id="outer_ldi" value="outer_ldi" <if condition="in_array('outer_ldi', $affected_tooling)" >checked</if>> <label for="outer_ldi">Outer LDI program</label> </div> <div class="checkbox-row"> <input name="affected_tooling[]" type="checkbox" id="outer_aoi" value="outer_aoi" <if condition="in_array('outer_aoi', $affected_tooling)" >checked</if>> <label for="outer_aoi">Outer layer AOI</label> </div> <div class="checkbox-row"> <input name="affected_tooling[]" type="checkbox" id="solder_mask_di" value="solder_mask_di" <if condition="in_array('solder_mask_di', $affected_tooling)">checked</if>> <label for="solder_mask_di">Solder mask DI program</label> </div> <div class="checkbox-row"> <input name="affected_tooling[]" type="checkbox" id="solder_mask_avi" value="solder_mask_avi" <if condition="in_array('solder_mask_avi', $affected_tooling)">checked</if>> <label for="solder_mask_avi">Solder mask AVI</label> </div> <div class="checkbox-row"> <input name="affected_tooling[]" type="checkbox" id="solder_stencil" value="solder_stencil" <if condition="in_array('solder_stencil', $affected_tooling)">checked</if>> <label for="solder_stencil">Solder mask stencil / printing jig</label> </div> <div class="checkbox-row"> <input name="affected_tooling[]" type="checkbox" id="via_filling" value="via_filling" <if condition="in_array('via_filling', $affected_tooling)" >checked</if>> <label for="via_filling">Via filling tool</label> </div> <div class="checkbox-row"> <input name="affected_tooling[]" type="checkbox" id="inkjet" value="inkjet" <if condition="in_array('inkjet', $affected_tooling)" >checked</if>> <label for="inkjet">Inkjet</label> </div> <div class="checkbox-row"> <input name="affected_tooling[]" type="checkbox" id="laser_mark" value="laser_mark" <if condition="in_array('laser_mark', $affected_tooling)" >checked</if>> <label for="laser_mark">Laser mark</label> </div> <div class="checkbox-row"> <input name="affected_tooling[]" type="checkbox" id="routing" value="routing" <if condition="in_array('routing', $affected_tooling)" >checked</if>> <label for="routing">Routing program</label> </div> <div class="checkbox-row"> <input name="affected_tooling[]" type="checkbox" id="etest" value="etest" <if condition="in_array('etest', $affected_tooling)" >checked</if>> <label for="etest">E-Test program / Fixture</label> </div> <!-- Others 行 --> <div class="checkbox-row full-width"> <input name="affected_tooling[]" type="checkbox" id="others_checkbox" value="others_checkbox" <if condition="in_array('others_checkbox', $affected_tooling)">checked</if>> <label for="others_checkbox">Others<span style="margin-left: 10px;">{$list.others_input}</span></label> </div> </div> </div> </div> <div class="section"> <h4>Part C: Running change schedule: (Follow PMC schedule)</h4> <div class="col"> <input type="checkbox" id="running_change_date_option" name="running_change_date_option" <if condition="$list.running_change_date_option" >checked</if>> <label style="width: 400px;margin-left: 10px;" for="running_change_wo_option">Running Change Effective Date & Time:<span>{$list.running_change_date}</span></label> </div> <div class="col"> <input type="checkbox" id="running_change_wo_option" name="running_change_wo_option" <if condition="$list.running_change_wo_option" >checked</if>> <label style="width: 400px;margin-left: 10px;" for="running_change_wo_option">Running Change Effective W/O:<span>{$list.running_change_wo}</span></label> </div> </div> <div class="section"> <h4>Part D: Approval</h4> <table class="approval-table"> <tr> <td>P.E</td> <td>M.E</td> <td>QA</td> </tr> <tr> <td>Date (MM/DD/YYYY):<br> <input type="date" name="pe_approve_date" value="{$list.pe_approve_date}"> <input type="time" name="pe_approve_time" value="{$list.pe_approve_time}"> </td> <td>Date (MM/DD/YYYY):<br> <input type="date" name="me_approve_date" value="{$list.me_approve_date}"> <input type="time" name="me_approve_time" value="{$list.me_approve_time}"> </td> <td>Date (MM/DD/YYYY):<br> <input type="date" name="qa_approve_date" value="{$list.qa_approve_date}"> <input type="time" name="qa_approve_time" value="{$list.qa_approve_time}"> </td> </tr> </table> <div class="footer" style="margin-top: 1px;">Remark:Tooling update only need PE manager approval</div> </div> <div class="footer"> <div>Form No. PEF-005</div> <div>Version: A/2</div> <div>Effective Date: 09/09/2024</div> </div> <div class="footer-page-break"></div> <div class="header" style="display: flex; justify-content: space-between; align-items: center;"> <img src="__PUBLIC__/Images/logo.gif" alt="Logo" style="height: 50px;"> <strong>TCN No: {$list.tcn_no_2} </div> <div class="header" style="justify-content: center;"> <h2>Tooling Change Notice (TCN)</h2> </div> <div class="footer"> <div>Form No. PEF-020</div> <div>Version: A/2</div> <div>Effective Date: 10/28/2024</div> </div> <div class="footer-page-break"></div> <div class="header" style="display: flex; justify-content: space-between; align-items: center;"> <img src="__PUBLIC__/Images/logo.gif" alt="Logo" style="height: 50px;"> <strong>TCN No: ______________ </div> <div class="header" style="justify-content: center;"> <h2>Tooling Change Notice (TCN)</h2> </div> <table class="approval-table"> <thead> <tr> <th>Affected Tooling</th> <th>Recall Tooling PIC</th> <th>Date</th> <th>PIC Signature</th> <th>Confirmed By PE</th> <th>PE Signature</th> <th>Prod.Signature</th> <th>Remarks</th> </tr> </thead> <tbody> <tr> <td>Inner LDI</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td>Inner AOI</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td>Pluritec</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td>Conf. mask LDI</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td>Drill program</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td>Hole / Laser AOI and Hole counter</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td>Buttonplate / Copper fill LDI</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td>Outer LDI</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td>Outer AOI</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td>Solder mask</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td>DI</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td>SM AVI</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td>SM Stencil/Jig</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td>RVF Tool</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td>Inkjet</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td>Laser mark</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td>Routing</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td>E-test</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td>Others</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </tbody> </table> <div class="footer"> <div>Form No. PEF-020</div> <div>Version: A/2</div> <div>Effective Date: 10/28/2024</div> </div> </div> </div> </div> <div class="formBar"> <ul> <li><div class="button"> <div class="buttonContent"><button type="button" onclick="navTab.closeCurrentTab()">关闭</button></div></div></li> <li><div class="buttonActive"><div class="buttonContent"><button type="button" onclick="print()">{$Think.lang.print}</button></div></div></li> </ul> </div> </div> </body> </html> <script language="javascript" type="text/javascript" src="__PUBLIC__/dwz/js/autosize.min.js"></script> <script language="JavaScript"> function print(){ //$("div#myPrintArea").printArea(); window.open('__URL__/printtable/id/{$list.id}'); } $(document).ready(function () { // 禁止所有 radio 按钮被点击修改 $('input[type="radio"]').each(function () { $(this).data('waschecked', $(this).is(':checked')); // 保存原始状态 $(this).on('click', function (e) { e.preventDefault(); // 阻止默认行为 return false; }); }); }); </script> 以上html页面怎么在浏览器打印的时候,左右两边内容显示不全
07-29
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符  | 博主筛选后可见
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值