High score help: HTML page pictures are automatically set to display according to the original size. If it exceeds the set value, it will be compressed and displayed. Please help_html/css_WEB-ITnose

HTML image

The page image address is: http://www.cdlovelife.com/public/info.php?id=12947
It seems that the resolution is poor, and the length and width are compressed It's very ugly.
The page source code is as follows:

<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 src="{$mymps_global.SiteUrl}{$image.prepath}" class="postinfoimg" width="240" height="240"/></a></li>    {/foreach}    </ul></div>

The effect I need is like that of Ganji.com, when pictures with smaller resolutions are automatically displayed according to the original image, set table
to exceed If necessary, compress the display, or display it partially, in short, it should be beautiful.

Please give me some code, thank you! The score is no problem, I will add it, haha

Reply to the discussion (solution)

Take

width as Accurate


 <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 src="http://www.cdlovelife.com/dat/upload/information/201307/13747304051jz9w.jpg" class="postinfoimg" />    	</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<imgs.length;i++){  			imgs[i].onload=function(){  				console.info( this.width,this.height )	  				if( w < this.width ) this.width=w;  			}  }</script>	

Put it in the page code to report an error, it’s strange

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 ) Remove this sentence


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) Remove this sentence


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:cdlovelifeincludesmartyclassSmarty.class.php on line 541

Should this function be defined in 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 ) Remove this sentence


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:cdlovelifeincludesmartyclassSmarty.class.php on line 541

Does this function need to be defined in Smarty.class.php?
Isn’t this JS treated as 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) Remove this sentence


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:cdlovelifeincludesmartyclassSmarty.class.php on line 541

Should this function be defined in Smarty.class.php?
Shouldn’t this JS be treated as PHP?

So how should this be handled?





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 class="cont_main" style="background-color: rgb(242, 251, 255);">   <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 src="{$mymps_global.SiteUrl}{$image.prepath}" class="postinfoimg" />        </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<imgs.length;i++){              imgs[i].onload=function(){                  console.info( this.width,this.height )                      if( w < this.width ) this.width=w;              }  }</script> 


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 class="cont_main" style="background-color: rgb(242, 251, 255);">   <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 src="{$image.path}" class="postinfoimg" />        </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="background-color: rgb(242, 251, 255);">   <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 src="{$image.path}" class="postinfoimg" />        </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;}


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