高分求助：html页面图片自动设置按照原大小显示，超过设定值就压缩显示，请大家帮忙_html/css_WEB-ITnose

HTML 图片

页面图片地址是： http://www.cdlovelife.com/public/info.php?id=12947
看起来分辨率差，长度和宽度又是压缩了的很难看。
页面源代码如下：

<div class="cont_main" style="background-color: rgb(242, 251, 255);">   <b>介绍：</b> {$info.content}    <ul class="pic_list clearfix">    {foreach from=$image item=image}    <li><a href="{$image.path}" target="_blank"><img  class="postinfoimg lazy"  src="/static/imghw/default1.png"  data-src="{$mymps_global.SiteUrl}{$image.prepath}"       style="max-width:90%"  style="max-width:90%"/ alt="高分求助：html页面图片自动设置按照原大小显示，超过设定值就压缩显示，请大家帮忙_html/css_WEB-ITnose" ></a></li>    {/foreach}    </ul></div>

我需要的效果就像赶集网那样子分辨率较小的图片的时候自动按照原图显示，设置table
超出了就压缩显示，或者部分显示，总之要美观。

请高手给段代码，谢谢！分数没问题，我会追加的，呵呵

回复讨论(解决方案)

以

宽度为准


 <div class="cont_main" style="background-color: rgb(242, 251, 255);">   <b>介绍：</b>      <ul class="pic_list clearfix" id="pic_list">     <li>    	<a href="http://www.cdlovelife.com/dat/upload/information/201307/13747304051jz9w.jpg" target="_blank">    		<img  class="postinfoimg lazy"  src="/static/imghw/default1.png"  data-src="http://www.cdlovelife.com/dat/upload/information/201307/13747304051jz9w.jpg"    / alt="高分求助：html页面图片自动设置按照原大小显示，超过设定值就压缩显示，请大家帮忙_html/css_WEB-ITnose" >    	</a>    </li>     </ul></div><script>  var imgList=document.getElementById('pic_list');  var imgs=imgList.getElementsByTagName('img');  var w=imgList.offsetWidth;  for(var i=0;i<img  class="postinfoimg lazy"  src="/static/imghw/default1.png"  data-src="{$mymps_global.SiteUrl}{$image.prepath}" s.length;i++){  			imgs[i].onload=function(){  				console.info( this.width,this.height )	  				if( w < this.width ) this.width=w;  			}  }</script alt="高分求助：html页面图片自动设置按照原大小显示，超过设定值就压缩显示，请大家帮忙_html/css_WEB-ITnose" >	

放到页面代码里报错呢，奇怪了

Fatal error: Smarty error: [in C:/cdlovelife/template/default/info.html line 86]: syntax error: unrecognized tag: imgs[i].onload=function(){ console.info( this.width,this.height ) if( w < this.width ) this.width=w; (Smarty_Compiler.class.php, line 295)

Fatal error: Smarty error: [in C:/cdlovelife/template/default/info.html line 86]: syntax error: unrecognized tag: imgs[i].onload=function(){ console.info( this.width,this.height ) if( w < this.width ) this.width=w; (Smarty_Compiler.class.php, line 295)
console.info( this.width,this.height ) 这句去掉


Fatal error: Smarty error: [in C:/cdlovelife/template/default/info.html line 86]: syntax error: unrecognized tag: imgs[i].onload=function(){ console.info( this.width,this.height ) if( w < this.width ) this.width=w; (Smarty_Compiler.class.php, line 295)
console.info( this.width,this.height ) 这句去掉


Fatal error: Smarty error: [in C:/cdlovelife/template/default/info.html line 86]: syntax error: unrecognized tag: imgs[i].onload=function(){ if( w < this.width ) this.width=w; (Smarty_Compiler.class.php, line 295) in C:\cdlovelife\include\smarty\class\Smarty.class.php on line 541

是不是这个函数要定义在Smarty.class.php里面？



Fatal error: Smarty error: [in C:/cdlovelife/template/default/info.html line 86]: syntax error: unrecognized tag: imgs[i].onload=function(){ console.info( this.width,this.height ) if( w < this.width ) this.width=w; (Smarty_Compiler.class.php, line 295)
console.info( this.width,this.height ) 这句去掉


Fatal error: Smarty error: [in C:/cdlovelife/template/default/info.html line 86]: syntax error: unrecognized tag: imgs[i].onload=function(){ if( w < this.width ) this.width=w; (Smarty_Compiler.class.php, line 295) in C:\cdlovelife\include\smarty\class\Smarty.class.php on line 541

是不是这个函数要定义在Smarty.class.php里面？
不是是把这JS当做PHP处理了吧





Fatal error: Smarty error: [in C:/cdlovelife/template/default/info.html line 86]: syntax error: unrecognized tag: imgs[i].onload=function(){ console.info( this.width,this.height ) if( w < this.width ) this.width=w; (Smarty_Compiler.class.php, line 295)
console.info( this.width,this.height ) 这句去掉


Fatal error: Smarty error: [in C:/cdlovelife/template/default/info.html line 86]: syntax error: unrecognized tag: imgs[i].onload=function(){ if( w < this.width ) this.width=w; (Smarty_Compiler.class.php, line 295) in C:\cdlovelife\include\smarty\class\Smarty.class.php on line 541

是不是这个函数要定义在Smarty.class.php里面？
不是是把这JS当做PHP处理了吧

那这个应该怎样处理？





Fatal error: Smarty error: [in C:/cdlovelife/template/default/info.html line 86]: syntax error: unrecognized tag: imgs[i].onload=function(){ console.info( this.width,this.height ) if( w < this.width ) this.width=w; (Smarty_Compiler.class.php, line 295)
console.info( this.width,this.height ) 这句去掉


Fatal error: Smarty error: [in C:/cdlovelife/template/default/info.html line 86]: syntax error: unrecognized tag: imgs[i].onload=function(){ if( w < this.width ) this.width=w; (Smarty_Compiler.class.php, line 295) in C:\cdlovelife\include\smarty\class\Smarty.class.php on line 541

是不是这个函数要定义在Smarty.class.php里面？
不是是把这JS当做PHP处理了吧

那这个应该怎样处理？

这替换你1楼那段HTML，如果还会出错把 <script>...</script> 放到 后或做成独立文件引用


<div    style="max-width:90%">   <b>介绍：</b> {$info.content}     <ul  id="pic_list">  	{foreach from=$image item=image}    <li>        <a href="{$image.path}" target="_blank">            <img  class="postinfoimg lazy"  src="/static/imghw/default1.png"  data-src="{$mymps_global.SiteUrl}{$image.prepath}"    / alt="高分求助：html页面图片自动设置按照原大小显示，超过设定值就压缩显示，请大家帮忙_html/css_WEB-ITnose" >        </a>    </li>  	{/foreach}    </ul></div><script>  var imgList=document.getElementById('pic_list');  var imgs=imgList.getElementsByTagName('img');  var w=imgList.offsetWidth;  for(var i=0;i<img  class="postinfoimg lazy"  src="/static/imghw/default1.png"  data-src="{$image.path}" s.length;i++){              imgs[i].onload=function(){                  console.info( this.width,this.height )                      if( w < this.width ) this.width=w;              }  }</script alt="高分求助：html页面图片自动设置按照原大小显示，超过设定值就压缩显示，请大家帮忙_html/css_WEB-ITnose" > 


Fatal error: Smarty error: [in C:/cdlovelife/template/default/info.html line 86]: syntax error: unrecognized tag: imgs[i].onload=function(){ console.info( this.width,this.height ) if( w < this.width ) this.width=w; (Smarty_Compiler.class.php, line 295)
console.info( this.width,this.height ) 这句去掉
这位兄弟多谢了，单独放到一个js页是可以的了。但是上传效果不太好，我希望是全部展示比如我宽度是728，超过728压缩展示，长度自适应调整，不超过也展示成一个固定的图片在中间，就是希望美观些。
原图：



上传后的图片显示为：

继续追加100分哈。再麻烦帮下忙。多谢了

就像CSDN展示这种。也可以，呵呵呵

就像CSDN展示这种。也可以，呵呵呵

你改一下 template/default/css/_liveShow.css 文件下样式，
单独写在文件中也可以


.cont_main .pic_list {	width: 728px;	margin: 10px auto;}.cont_main .pic_list img{	max-width: 728px;	}


就像CSDN展示这种。也可以，呵呵呵

你改一下 template/default/css/_liveShow.css 文件下样式，
单独写在文件中也可以


.cont_main .pic_list {	width: 728px;	margin: 10px auto;}.cont_main .pic_list img{	max-width: 728px;	}



template/default/css/_liveShow.css


.cont_main .pic_list { width:590px; margin:10px auto;}.cont_main .pic_list li { float:left; display:inline; margin:5px;}.cont_main .pic_list li img { padding:1px; border:1px solid #ddd;}


这三行替换为你的代码也没有完全填充。
只展示在边边上，并且展示的很小，我需要填充页面宽度，我上传的这个图片分辨率较高

改成 不要缩略图，这样打开页面图变慢些


<div    style="max-width:90%">   <b>介绍：</b> {$info.content}     <ul  id="pic_list">      {foreach from=$image item=image}    <li>        <a href="{$image.path}" target="_blank">            <img  class="postinfoimg lazy"  src="/static/imghw/default1.png"  data-src="{$image.path}"    / alt="高分求助：html页面图片自动设置按照原大小显示，超过设定值就压缩显示，请大家帮忙_html/css_WEB-ITnose" >        </a>    </li>      {/foreach}    </ul></div>


728 对你那页面大了点我改成 690


.cont_main .pic_list { width:690px; margin:10px auto;}.cont_main .pic_list li { float:left; display:inline; margin:5px;}.cont_main .pic_list li img { padding:1px; border:1px solid #ddd; max-width:690px;}


这样你试试效果

改成 不要缩略图，这样打开页面图变慢些


<div class="cont_main"   style="max-width:90%">   <b>介绍：</b> {$info.content}     <ul class="pic_list clearfix" id="pic_list">      {foreach from=$image item=image}    <li>        <a href="{$image.path}" target="_blank">            <img  class="postinfoimg lazy"  src="/static/imghw/default1.png"  data-src="{$image.path}"    / alt="高分求助：html页面图片自动设置按照原大小显示，超过设定值就压缩显示，请大家帮忙_html/css_WEB-ITnose" >        </a>    </li>      {/foreach}    </ul></div>


728 对你那页面大了点我改成 690


.cont_main .pic_list { width:690px; margin:10px auto;}.cont_main .pic_list li { float:left; display:inline; margin:5px;}.cont_main .pic_list li img { padding:1px; border:1px solid #ddd; max-width:690px;}


这样你试试效果
嘿嘿搞定多谢，以前可以追加分数的。现在咋个追加分数丫。这两天结贴，我再研究研究。
呵呵呵