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

S

salemnb

Private
13340703_1693564317562394_211625318_o.jpg
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ỉ giúp dùng timthumb để 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ó mà bạn Thuyet951 đã làm hộ, nhưng tỉ lệ thì b ấy chưa có thời gian giúp:
Template:
Mã: 
<xen:require css="EWRwidget_ArticlesSimple.css" />

<div class="widget_{$wWidget} row" id="widget_{$wWidlink}">
    <div class="articlesSmall">
    <xen:foreach loop="$wUncached" value="$article" i="$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="$article" size="s" class="Tooltip" title="{$article.username}" itemprop="photo" />
                    <xen:elseif is="!@porta2_articles_header" />
                        <xen:if is="{$article.article_icon.type} == 'attach'">
                            <a 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'" />
                            <a 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'" />
                            <a 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="$wUncached" value="$article" i="$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="$article" size="s" class="Tooltip" title="{$article.username}" itemprop="photo" />
                    <xen:elseif is="!@porta2_articles_header" />
                        <xen:if is="{$article.article_icon.type} == 'attach'">
                            <a 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'" />
                            <a 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'" />
                            <a 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="$article" size="s" class="Tooltip" title="{$article.username}" itemprop="photo" />
                    <xen:elseif is="!@porta2_articles_header" />
                        <xen:if is="{$article.article_icon.type} == 'attach'">
                            <a 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'" />
                            <a 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'" />
                            <a 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>

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;
}
 
Sửa lần cuối:
Bài viết liên quan
guest enter with translator option bởi justone,
Best modern Xenforo style? bởi qnkov,
Lỗi không up được ảnh bởi tunorri,
Bị google thông báo "Bị loại trừ bởi thẻ 'noindex''" bởi 7chulun,
Addon Custom icon node cho xenforo 2.3.3 bởi tranxuanbactb,
Cách setup giống website dạng tinh tế bởi novelupdatedow,
Bài viết mới
Các phiên bản Xenforo mới ở đâu ? bởi kiennt317,
XenForo Custom Footer v.1.0.0 bởi Serialc0de,
Xin Addon Comment mới thấy link bởi namchelsea,
guest enter with translator option bởi justone,
Best modern Xenforo style? bởi qnkov,
Video streaming addon? bởi qnkov,
Cái này mình nhờ bạn Thuyet làm cho. Tạm gọi là hot slide, thêm template và css, chèn vào portal. Bạn ấy bận quá nên chưa chỉnh cho mình cái tỉ lệ. Mình đang xem dùng cái timthumb để chỉnh hình ảnh mà chưa được.
Bác nào xem giúp mình với
 
Thank u so much. :D
lúc nào có v3.0 show cho ae chiêm ngưỡng tí cái style kia là t1 rồi nhỉ.
 
937 6 1
Bạn phải đăng nhập hoặc đăng ký để bình luận.

Dịch vụ XenForo của VNXF

anhanhxf     0906081284
silzedt_1207          Inbox   PVS

Hướng dẫn sử dụng

XenForo 1 XenForo 2
Translate by PVS
Xenforo là gì?
Xây dựng MXH bằng Xenforo

Xử lý sự cố (Troubleshooting)

Texlink

Diễn đàn chia sẻ kinh nghiệm massage
Review dịch vụ massage toàn quốc
Cộng Đồng Massage Việt Nam
Liên hệ đặt Textlink

Nhà Tài Trợ

Mút Xốp Không Gian
Mút Sofa Không Gian
Back
Top