Question Chỉnh tỉ lệ hình ảnh hot slide cho đẹp

Thảo luận trong 'Add-on Quesions' bắt đầu bởi salemnb, 4/6/16.

  1. salemnb

    salemnb New Member

    Bài viết:
    36
    Likes :
    2
    Mình đang dùng portal 2. Có cái hot slide trên trang chủ nó bị méo ảnh khi hiển thị trông bẹp nhem, xấu lắm, vì một cái lấy tỉ lệ 100%, cái còn lại là px. Bạn nào chỉnh giúp cho mình cái canh lề này để cho hình đẹp với, có thể chiều ngang không cần đủ kích thước như tinh tế. Xin cảm ơn
    Đây là tem và css của nó:
    Template:
    PHP:
    <xen:require css="EWRwidget_ArticlesSimple.css" />

    <
    div class="widget_{$wWidget} row" id="widget_{$wWidlink}">
        <
    div class="articlesSmall">
        <
    xen:foreach loop="$wUncachedvalue="$articlei="$i">
            <
    xen:if is="{$i} <= 3">
            <
    div class="hotnews col l4 s4">
                <
    xen:if hascontent="true">
                  
                        <
    xen:contentcheck>
                        <
    xen:if is="{$article.article_icon.type} == 'avatar'">
                            <
    xen:avatar user="$articlesize="s" class="Tooltip" title="{$article.username}itemprop="photo" />
                        <
    xen:elseif is="!@porta2_articles_header" />
                            <
    xen:if is="{$article.article_icon.type} == 'attach'">
                                <
    class="attachHolder" href="{xen:link threads, $article}">
                                    <
    xen:if is="@porta2_articles_fullsize">
                                        <
    img src="{xen:link attachments, $article.article_icon.data}" alt="{$article.article_icon.data.filename}/>
                                    <
    xen:else/>
                                        <
    img src="{xen:link attachments, $article.article_icon.data}" alt="{$article.article_icon.data.filename}/>
                                    </
    xen:if>
                                </
    a>
                            <
    xen:elseif is="{$article.article_icon.type} == 'image'" />
                                <
    class="attachHolder" href="{xen:link threads, $article}"><img src="{$article.article_icon.data.url}alt="{$article.article_icon.data.file}/></a>
                            <
    xen:elseif is="{$article.article_icon.type} == 'medio'" />
                                <
    class="medioHolder OverlayTrigger"style="background-image: url('{xen:helper medio2, $article.article_icon.data}');"
                                    
    href="{xen:link 'full:media/media', $article.article_icon.data}" data-href="{xen:link 'full:media/media/popout', $article.article_icon.data}"
                                    
    data-cacheOverlay="false" data-overlayoptions="{&quot;fixed&quot;:false}">
                                        <
    img src="styles/8wayrun/EWRmedio_play.png" />
                                </
    a>
                            </
    xen:if>
                        </
    xen:if>
                        </
    xen:contentcheck>
                  
                </
    xen:if>
        <
    div class="title">
            <
    a href="{xen:link threads, $article}">{$article.article_title}</a>
        </
    div>
        </
    div>
        </
    xen:if>
        </
    xen:foreach>
        </
    div>
        <
    div class="articlesSmall2">
        <
    xen:foreach loop="$wUncachedvalue="$articlei="$i">
            <
    xen:if is="{$i} == 4">
            <
    div class="hotnews col l6 s6">
                <
    xen:if hascontent="true">
                  
                        <
    xen:contentcheck>
                        <
    xen:if is="{$article.article_icon.type} == 'avatar'">
                            <
    xen:avatar user="$articlesize="s" class="Tooltip" title="{$article.username}itemprop="photo" />
                        <
    xen:elseif is="!@porta2_articles_header" />
                            <
    xen:if is="{$article.article_icon.type} == 'attach'">
                                <
    class="attachHolder" href="{xen:link threads, $article}">
                                    <
    xen:if is="@porta2_articles_fullsize">
                                        <
    img src="{xen:link attachments, $article.article_icon.data}" alt="{$article.article_icon.data.filename}/>
                                    <
    xen:else/>
                                        <
    img src="{xen:link attachments, $article.article_icon.data}" alt="{$article.article_icon.data.filename}/>
                                    </
    xen:if>
                                </
    a>
                            <
    xen:elseif is="{$article.article_icon.type} == 'image'" />
                                <
    class="attachHolder" href="{xen:link threads, $article}"><img src="{$article.article_icon.data.url}alt="{$article.article_icon.data.file}/></a>
                            <
    xen:elseif is="{$article.article_icon.type} == 'medio'" />
                                <
    class="medioHolder OverlayTrigger"style="background-image: url('{xen:helper medio2, $article.article_icon.data}');"
                                    
    href="{xen:link 'full:media/media', $article.article_icon.data}" data-href="{xen:link 'full:media/media/popout', $article.article_icon.data}"
                                    
    data-cacheOverlay="false" data-overlayoptions="{&quot;fixed&quot;:false}">
                                        <
    img src="styles/8wayrun/EWRmedio_play.png" />
                                </
    a>
                            </
    xen:if>
                        </
    xen:if>
                        </
    xen:contentcheck>
                  
                </
    xen:if>
        <
    div class="title">
            <
    a href="{xen:link threads, $article}">{$article.article_title}</a>
        </
    div>
        </
    div>
        </
    xen:if>
            <
    xen:if is="{$i} == 5">
            <
    div class="hotnews col l6 s6">
                <
    xen:if hascontent="true">
                  
                        <
    xen:contentcheck>
                        <
    xen:if is="{$article.article_icon.type} == 'avatar'">
                            <
    xen:avatar user="$articlesize="s" class="Tooltip" title="{$article.username}itemprop="photo" />
                        <
    xen:elseif is="!@porta2_articles_header" />
                            <
    xen:if is="{$article.article_icon.type} == 'attach'">
                                <
    class="attachHolder" href="{xen:link threads, $article}">
                                    <
    xen:if is="@porta2_articles_fullsize">
                                        <
    img src="{xen:link attachments, $article.article_icon.data}" alt="{$article.article_icon.data.filename}/>
                                    <
    xen:else/>
                                        <
    img src="{xen:link attachments, $article.article_icon.data}" alt="{$article.article_icon.data.filename}/>
                                    </
    xen:if>
                                </
    a>
                            <
    xen:elseif is="{$article.article_icon.type} == 'image'" />
                                <
    class="attachHolder" href="{xen:link threads, $article}"><img src="{$article.article_icon.data.url}alt="{$article.article_icon.data.file}/></a>
                            <
    xen:elseif is="{$article.article_icon.type} == 'medio'" />
                                <
    class="medioHolder OverlayTrigger"style="background-image: url('{xen:helper medio2, $article.article_icon.data}');"
                                    
    href="{xen:link 'full:media/media', $article.article_icon.data}" data-href="{xen:link 'full:media/media/popout', $article.article_icon.data}"
                                    
    data-cacheOverlay="false" data-overlayoptions="{&quot;fixed&quot;:false}">
                                        <
    img src="styles/8wayrun/EWRmedio_play.png" />
                                </
    a>
                            </
    xen:if>
                        </
    xen:if>
                        </
    xen:contentcheck>
                  
                </
    xen:if>
        <
    div class="title">
            <
    a href="{xen:link threads, $article}">{$article.article_title}</a>
        </
    div>
        </
    div>
        </
    xen:if>
        </
    xen:foreach>
      
        </
    div>
    </
    div>
    Css:
    Mã:
    .widget_ArticlesSimple .hotnews {
      position: relative;
      padding: 1px;
    }
    .widget_ArticlesSimple .hotnews img {
      width: 100%;
      height: 120px;
    }
    .widget_ArticlesSimple .hotnews .title {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 7px;
      background-color: rgba(23, 96, 147, 0.57);
      margin: 0 2px 5px 2px;
      font-size: 15px;
    }
    @media only screen and (max-width: 480px) {
      .widget_ArticlesSimple .hotnews .title {
        font-size: 15px;
      }
    }
    .widget_ArticlesSimple .hotnews .title a {
      color: #fff;
    }
    .widget_ArticlesSimple .hotnews .title a:hover {
      color: #e0e0e0;
    }
    13340703_1693564317562394_211625318_o
     
    Last edited: 4/6/16
    Đang tải...
  2. salemnb

    salemnb New Member

    Bài viết:
    36
    Likes :
    2
    Mình sử dụng timtumb http://vxf.vn/threads/tut-su-dung-timthumb-trong-xenforo.8099/ để chỉnh ảnh như sau nhưng chưa được, bác nào xem giúp với.
    Mã:
    <img src="http://localhost/1/timthumb.php?src="{xen:link attachments, $article.article_icon.data}"&h=280&w=380&zc=1"" alt="{$article.article_icon.data.filename}" />
     
comments powered by Disqus

Chia sẻ trang này

Đang tải...