搜尋

首頁 >web前端 >html教學 >怎么才能让多张图片在手机不同分辨率下居中显示_html/css_WEB-ITnose

怎么才能让多张图片在手机不同分辨率下居中显示_html/css_WEB-ITnose

WBOY
WBOY原創
2016-06-21 09:27:281378瀏覽

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title>   <style type="text/css"> *{	margin: 0;	padding: 0;}body{	-webkit-user-select: none;	-webkit-user-drag: none;	-webkit-text-size-adjust: 100%;}a{	text-decoration: none;}a,input,button,textarea,fieldset,ul,span{	-webkit-tap-highlight-color: rgba(255,255,255,0);}input[type='text'] ,textarea ,fieldset{	border: none;	outline: none;}body,h1,h2,h3,h4,h5,h6,p,form,ul,ol,li,dt,dl,dd,th,td,label,bottom,input,textarea{ margin:0;padding:0;}body{font:12px/1.5 arial,Tahoma; text-align:left;background:#FFF;color:#333;}fieldset,img{border:0;}ul{margin:0;padding:0;list-style:none;}div,th,td{font-size:12px;}.clearfix:after{ content:"\20"; display:block; clear:both; height:0}.clearfix:after{ *zoom:1}.clear{}a{ color:#555; cursor:pointer; text-decoration:none;}body{	font-family:Arial,"Lucida Grande",Verdana,"Microsoft YaHei",hei;	background:#f4f4f4;}.container_fixed{	width:320px;	margin:0 auto;}.container_fluid{	}.plr10{	padding:0 10px}.jd_li {height: 95px;float: left;display:inline;background: #fff;margin-right: 3px;margin-bottom: 3px;}.jd-c p {line-height: 14px;height: 14px;text-align: center;width: 93px;overflow: hidden;}</style>   <body><div class="" style="text-align:center;">   <ul class="clearfix plr10">     <li class="jd_li">      <div class=""><img     style="max-width:90%"  style="max-width:90%" src="http://pkgpic.ctrip.com/images2/174/821/821_46_S43272.JPG" / alt="怎么才能让多张图片在手机不同分辨率下居中显示_html/css_WEB-ITnose" ></div>      <div class="jd-c"><div class=""><p>鼓浪屿</p></div></div>     </li>     <li class="jd_li">      <div class=""><img     style="max-width:90%"  style="max-width:90%" src="http://pkgpic.ctrip.com/images2/174/821/821_46_S43272.JPG" / alt="怎么才能让多张图片在手机不同分辨率下居中显示_html/css_WEB-ITnose" ></div>      <div class="jd-c"><div class=""><p>鼓浪屿</p></div></div>     </li>     <li class="jd_li">      <div class=""><img     style="max-width:90%"  style="max-width:90%" src="http://pkgpic.ctrip.com/images2/174/821/821_46_S43272.JPG" / alt="怎么才能让多张图片在手机不同分辨率下居中显示_html/css_WEB-ITnose" ></div>      <div class="jd-c"><div class=""><p>鼓浪屿</p></div></div>     </li>     <li class="jd_li">      <div class=""><img     style="max-width:90%"  style="max-width:90%" src="http://pkgpic.ctrip.com/images2/174/821/821_46_S43272.JPG" / alt="怎么才能让多张图片在手机不同分辨率下居中显示_html/css_WEB-ITnose" ></div>      <div class="jd-c"><div class=""><p>鼓浪屿</p></div></div>     </li>     <li class="jd_li">      <div class=""><img     style="max-width:90%"  style="max-width:90%" src="http://pkgpic.ctrip.com/images2/174/821/821_46_S43272.JPG" / alt="怎么才能让多张图片在手机不同分辨率下居中显示_html/css_WEB-ITnose" ></div>      <div class="jd-c"><div class=""><p>鼓浪屿</p></div></div>     </li>     <li class="jd_li">      <div class=""><img     style="max-width:90%"  style="max-width:90%" src="http://pkgpic.ctrip.com/images2/174/821/821_46_S43272.JPG" / alt="怎么才能让多张图片在手机不同分辨率下居中显示_html/css_WEB-ITnose" ></div>      <div class="jd-c"><div class=""><p>鼓浪屿</p></div></div>     </li>   </ul></div></body></html>


回复讨论(解决方案)

在head标签对里面加入


在手机中用属性max-height, max-width,代替pc的height,width

在head标签对里面加入


在手机中用属性max-height, max-width,代替pc的height,width



试过了 没有用啊 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title>    <style type="text/css"> *{    margin: 0;    padding: 0;}body{    -webkit-user-select: none;    -webkit-user-drag: none;    -webkit-text-size-adjust: 100%;}a{    text-decoration: none;}a,input,button,textarea,fieldset,ul,span{    -webkit-tap-highlight-color: rgba(255,255,255,0);}input[type='text'] ,textarea ,fieldset{    border: none;    outline: none;} body,h1,h2,h3,h4,h5,h6,p,form,ul,ol,li,dt,dl,dd,th,td,label,bottom,input,textarea{ margin:0;padding:0;}body{font:12px/1.5 arial,Tahoma; text-align:left;background:#FFF;color:#333;}fieldset,img{border:0;}ul{margin:0;padding:0;list-style:none;}div,th,td{font-size:12px;}  .clearfix:after{ content:"\20"; display:block; clear:both; height:0}.clearfix:after{ *zoom:1}.clear{}a{ color:#555; cursor:pointer; text-decoration:none;} body{    font-family:Arial,"Lucida Grande",Verdana,"Microsoft YaHei",hei;    background:#f4f4f4;}.container_fixed{    width:320px;    margin:0 auto;}.container_fluid{     }.plr10{    padding:0 10px}.jd_li {height: 95px;display:inline-block;background: #fff;margin-right: 3px;margin-bottom: 3px;}.jd-c p {line-height: 14px;height: 14px;text-align: center;width: 93px;overflow: hidden;}</style>    <body>    <ul class="clearfix plr10" style="margin:0 auto;width:100%;text-align:center;">     <li class="jd_li">      <div class=""><img     style="max-width:90%"  style="max-width:90%" src="http://pkgpic.ctrip.com/images2/174/821/821_46_S43272.JPG" / alt="怎么才能让多张图片在手机不同分辨率下居中显示_html/css_WEB-ITnose" ></div>      <div class="jd-c"><div class=""><p>鼓浪屿</p></div></div>     </li>     <li class="jd_li">      <div class=""><img     style="max-width:90%"  style="max-width:90%" src="http://pkgpic.ctrip.com/images2/174/821/821_46_S43272.JPG" / alt="怎么才能让多张图片在手机不同分辨率下居中显示_html/css_WEB-ITnose" ></div>      <div class="jd-c"><div class=""><p>鼓浪屿</p></div></div>     </li>     <li class="jd_li">      <div class=""><img     style="max-width:90%"  style="max-width:90%" src="http://pkgpic.ctrip.com/images2/174/821/821_46_S43272.JPG" / alt="怎么才能让多张图片在手机不同分辨率下居中显示_html/css_WEB-ITnose" ></div>      <div class="jd-c"><div class=""><p>鼓浪屿</p></div></div>     </li>     <li class="jd_li">      <div class=""><img     style="max-width:90%"  style="max-width:90%" src="http://pkgpic.ctrip.com/images2/174/821/821_46_S43272.JPG" / alt="怎么才能让多张图片在手机不同分辨率下居中显示_html/css_WEB-ITnose" ></div>      <div class="jd-c"><div class=""><p>鼓浪屿</p></div></div>     </li>     <li class="jd_li">      <div class=""><img     style="max-width:90%"  style="max-width:90%" src="http://pkgpic.ctrip.com/images2/174/821/821_46_S43272.JPG" / alt="怎么才能让多张图片在手机不同分辨率下居中显示_html/css_WEB-ITnose" ></div>      <div class="jd-c"><div class=""><p>鼓浪屿</p></div></div>     </li>     <li class="jd_li">      <div class=""><img     style="max-width:90%"  style="max-width:90%" src="http://pkgpic.ctrip.com/images2/174/821/821_46_S43272.JPG" / alt="怎么才能让多张图片在手机不同分辨率下居中显示_html/css_WEB-ITnose" ></div>      <div class="jd-c"><div class=""><p>鼓浪屿</p></div></div>     </li>   </ul></body></html>

陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：分享27款后台管理页面设计 DIV+CSS+JS_html/css_WEB-ITnose下一篇：两个div同一行的问题_html/css_WEB-ITnose

相關文章

看更多