怎么才能让多张图片在手机不同分辨率下居中显示_html/css_WEB-ITnose
- 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으로 문의하세요.