ホームページ > ウェブフロントエンド > htmlチュートリアル > ヘルプの高スコア: HTML ページの画像は、元のサイズに従って表示されるように自動的に設定されます。設定値を超える場合は、help_html/css_WEB-ITnose を使用して表示されます。

ヘルプの高スコア: HTML ページの画像は、元のサイズに従って表示されるように自動的に設定されます。設定値を超える場合は、help_html/css_WEB-ITnose を使用して表示されます。

WBOY
リリース: 2016-06-24 12:22:55
オリジナル
1466 人が閲覧しました

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 src="{$mymps_global.SiteUrl}{$image.prepath}" class="postinfoimg" width="240" height="240"/></a></li>    {/foreach}    </ul></div>
ログイン後にコピー


必要な効果は Ganji.com のようなもので、元の画像に従って解像度の低い画像が自動的に表示される場合は、テーブルを設定します
制限を超えている場合、圧縮されて表示されるか、部分的に表示されます。 つまり、美しくなければなりません。

コードを教えてください、ありがとう!スコアは問題ありません、追加します、笑


ディスカッションに返信(解決策)

    の幅に基づいて

     <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ページのコード内にあります 報告されたエラーは奇妙です

    致命的なエラー: Smarty エラー: [C:/cdlovelife/template/default/info.html 86 行目]: 構文エラー: 認識されないタグ: imgs[i].onload=function (){ console. info( this.width,this.height ) if( w < this.width ) this.width=w; (Smarty_Compiler.class.php、295 行目)

    致命的なエラー: Smarty エラー: [in C:/cdlovelife/ template/default/info.html 86 行目]: 構文エラー: 認識されないタグ: imgs[i].onload=function(){ console.info( this.width,this.height ) if( w < this.width ) this .width=w; (Smarty_Compiler.class.php、295 行目)

    console.info(this.width,this.height) この文を削除します

    致命的なエラー: Smarty エラー: [in C:/ cdlovelife/template/default /info.html 86 行目]: 構文エラー: 認識されないタグ: imgs[i].onload=function(){ console.info( this.width,this.height ) if( w < this.width ) this.width= w; (Smarty_Compiler.class.php、295 行目)
    console.info(this.width,this.height) この文を削除します


    致命的なエラー: Smarty エラー: [in C:/cdlovelife/template /default/info.html 行 86]: 構文エラー: 認識されないタグ: imgs[i].onload=function(){ if( w < this.width ) this.width=w; (Smarty_Compiler.class.php, line) 295) C: cdlovelifeincludesmartyclassSmarty.class.php の 541 行目

    この関数は Smarty.class.php で定義する必要がありますか?


    致命的なエラー: Smarty エラー: [C:/cdlovelife/template/default/info.html 行 86]: 構文エラー: 認識されないタグ: imgs[i].onload=function(){ console.info( this .width,this.height ) if( w < this.width ) this.width=w; (Smarty_Compiler.class.php、295 行目)
    console.info( this.width,this.height ) この文を削除します


    致命的なエラー: Smarty エラー: [C:/cdlovelife/template/default/info.html 行 86]: 構文エラー: 認識されないタグ: imgs[i].onload=function(){ if( w < this.width ) this.width=w; (Smarty_Compiler.class.php、295 行目) C:cdlovelifeincludesmartyclassSmarty.class.php の 541 行目

    この関数は Smarty.class.php で定義する必要がありますか?
    この JS を PHP として扱っていませんか?



    致命的なエラー: Smarty エラー: [C:/cdlovelife/template/default/info.html 行 86]: 構文エラー: 認識されないタグ: imgs[i ].onload=function(){ console.info( this.width,this.height ) if( w < this.width ) this.width=w; (Smarty_Compiler.class.php、295 行目)
    console.info( this.width,this.height ) この文を削除します


    致命的なエラー: Smarty エラー: [C:/cdlovelife/template/default/info.html 行 86]: 構文エラー: 認識されないタグ: imgs[i].onload =function(){ if( w < this.width ) this.width=w; (Smarty_Compiler.class.php、295 行目) C:cdlovelifeincludesmartyclassSmarty.class.php の 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 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;}
    ログイン後にコピー
    ログイン後にコピー

    这样你试试效果
    嘿嘿搞定多谢,以前可以追加分数的。现在咋个追加分数丫。这两天结贴,我再研究研究。
    呵呵呵
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート