• Bỏ qua primary navigation
  • Skip to main content
  • Bỏ qua primary sidebar
  • Bỏ qua footer
Thành Thái Blog

Thành Thái Blog

Thủ thuật Wordpress, thủ thuật SEO và chia sẻ mã giảm giá hosting domain

  • WordPress
  • Domain Coupon
    • Namecheap Coupon
    • Godaddy Coupon
    • Domain.com Coupon
  • Hosting Coupon
    • Hostarmada Coupon
    • HawkHost Coupon
    • Stablehost Coupon
    • A2Hosting Coupon
    • Dreamhost Coupon
    • Exabytes Coupon
    • GreenValueHost Coupon
    • Hostgator Coupon
    • inmotion Coupon
    • Siteground Coupon
  • SEO
  • Kiếm tiền Online
Thành Thái Blog  ➢  Kinh nghiệm  ➢  Tự động resize ảnh nền theo thẻ div, sử dụng ...

Tự động resize ảnh nền theo thẻ div, sử dụng CSS

Thái Dương 25/11/2021 Kinh nghiệm Để lại bình luận

Có khi nào bạn làm giao diện cho trang tin tức. Bạn chăm chút cẩn thận cho mỗi tin có một thumbnail đẹp đẽ vuông vức. Đến khi bàn gian cho khách hàng thì ôi thôi! Cái thì khách hàng up ảnh 16:9, có cái thì xoay dọc lại kiểu ảnh chân dung 3:4 … Bạn phát điên lên vì giao diện hoặc vỡ be bét hoặc ảnh thumbnail bị kéo lệch xấu xí do không đúng tỉ lệ.

Với một kỹ thuật CSS đơn giản, bạn có thể giải quyết vấn đề này bằng cách tự động scale ảnh cho fix đúng theo kích thước quy định, và tập trung hiển thị vào chính giữa ảnh nền, giúp đảm bảo người đọc vẫn xem được nội dung ảnh, người viết bài có thể upload bất kì ảnh với tỉ lệ nào vẫn không làm vỡ giao diện.

Kỹ thuật Resize ảnh thumbnail bằng CSS

Resize ảnh thumbnail bằng CSS
Ảnh gốc, trước khi resize

Và khi áp dụng kỹ thuật resize ảnh thumbnail bằng CSS sẽ được như hình dưới đây

Resize ảnh bằng CSS
Sau khi áp dụng kỹ thuật resize ảnh bằng CSS vào ảnh thumbnail

Giải thích

Như bạn đã xem ở demo trên, khi kích thước và tỉ lệ ảnh không khớp với thiết kế của website, sẽ làm cho ảnh thumnail chỉ hiển thị được 1 góc của ảnh thật. Chưa kể, nếu bạn xuất thumbnail trực tiếp bằng thẻ img, ảnh với các tỉ lệ khác nhau sẽ phá vỡ giao diện của bạn, trồi sụt một cách thảm hại.

Khi dùng kỹ thuật css cover art, ảnh dù ở tỉ lệ và kích thước nào cũng sẽ được fix vừa vào khung nhìn thiết kế trước, đảm bảo luôn hiển thị nội dung chính xác và không làm hỏng giao diện.

Kỹ thuật cover ảnh thumbnail này cần thực hiện trên cả HTML và CSS. Trong đó:

  • HTML cần dùng 1 thẻ div trống để làm khung hiển thị.  Lưu ý ta không dùng trực tiếp thẻ img, vì nếu dùng img, khi scale ảnh theo tỉ lệ khác với ảnh gốc, ảnh sẽ bị méo/lệch trông rất xấu!
  • CSS tự động resize ảnh, làm cho phần ảnh nền tự động fix vừa theo kích thước khung nhìn (thẻ div làm thumbnail) và căn vào chính giữa nội dung của ảnh. Việc căn giữa để thể hiện nội dung ảnh là mang tính dự đoán và gần như chính xác; do khi chụp ảnh, nội dung chính bức ảnh “thường” được căn vào giữa ảnh, ít thợ ảnh nào lại chụp chân dung với hình cô gái ở góc bức ảnh!

Thực hiện

<div class="news">
    <div class="article">
        <div class="thumb"></div>
        <div class="title">Tiêu đề bản tin.</div>
    </div>
    <div class="article">
        <div class="thumb"></div>
        <div class="title">Tiêu đề bản tin</div>
    </div>
    <div class="article">
        <div class="thumb"></div>
        <div class="title">Tiêu đề bản tin</div>
    </div>
</div>

Ở đây tôi tạo thẻ div.news rộngđể chứa tin, mỗi tin tức .article  được format với thumb ở trên và tiêu đề bản tin ở dưới.

.news{
    width: 100%;
    height: auto;
    padding: 5px;
    background-color: #e6e6e6;
}
.article {
    width: 200px;
    height: 220px;
    display: inline-block;
    padding: 5px;
    margin-left: 10px;
    vertical-align:top;
}
.thumb {
    width: 200px;
    height: 150px;
    background-color: #3e3e3e;
    background-image: none;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

 

Hãy chú ý vào phần style cho .thumb. Trọng yếu của kỹ thuật này chính là sử dụng hai thuộc tính background-size và background-position. Để làm cho ảnh nền tự resize vừa theo kích thước của thẻ div, ta dùng thuộc tính background-size  với giá trị là cover. Sau đó dùng background-position với giá trị center để căn giữa ảnh vào khung nhìn của thumbnail.

Chú ý ở là trong đoạn css của .thumb, tôi đặt giá trị background-image là none ? Do class .thumb  được dùng lại cho nhiều bản tin khác nhau, ta không thể set cứng cùng một hình ảnh được. Ta cần để lại phần set hình ảnh bằng cách nhúng trực tiếp trong code HTML. Sửa lại HTML như sau:

<div class="news">
    <div class="article">
        <div class="thumb" style="background-image: url(https://thanhthai.org/thumbnail.jpg);"></div>
        <div class="title">Tiêu đề bản tin</div>
    </div>
</div>

Hoàn thiện khi thao tác với PHP

Khi thao tác bằng PHP, ta có thể code như sau, giả sử đã có dữ liệu trong biến $article

<div class="news">
    <div class="article">
        <div class="thumb" style="background-image: url(<?php echo $article->getThumbNail() ?>);"></div>
        <div class="title"><?php echo $article->getTitle() ?></div>
    </div>
</div>

 

Bài viết liên quan

  • Cách viết CV xin việc hay và lôi cuốn nhà tuyển dụng
  • Hướng dẫn tạo và cài đặt email tên miền riêng miễn phí Microsoft – live.com
  • Xử lý lỗi không addon domain được với Namecheap hosting
  • Biến VPS windows của Vultr thành host download và upload file
  • Hướng dẫn cài .NET Framework 3.5 cho windows server 2012

Tags: css scale thumbnail

Nói về Thái Dương

Tốt nghiệp chuyên ngành CNTT nhưng bản thân lại thích kinh doanh và kiếm tiền trên internet. Hiện tại mình là Freelancer, ai thuê gì tôi làm đó, chỉ cần hàng ngày kiếm đủ tiền mua bỉm, sữa cho con là đủ :) Follow Facebook - Twitter - Pinterest của tôi để chúng tôi kết nối cùng nhau nhé

Theo dõi
Đăng nhập
Thông báo của
guest
Nhập tên của bạn
Địa chỉ email của bạn
Website của bạn là gì?

guest
Nhập tên của bạn
Địa chỉ email của bạn
Website của bạn là gì?

0 Comments
Phản hồi nội tuyến
Xem tất cả bình luận

Sidebar chính

Bài viết mới

get envato elements mien phi – chia se free elements envato

Get Envato Elements miễn phí – Download Free Elements Envato

GIẢM 25% Dịch vụ Cloud VPS, Hosting hoặc NHÂN ĐÔI RAM, Tặng đến 12 tháng sử dụng

Tự động resize ảnh nền theo thẻ div, sử dụng CSS

HostingViet giảm 50% các dịch vụ cho Black Friday 2021

Tiêu chí lựa chọn nhà cái uy tín

Tên miền miễn phí tại 1and1

[Kèo ngon] Hướng dẫn đăng ký tên miền + hosting miễn phí 1 năm

Hosting nên dùng cho Wordpress

HELLO2017
VPS giá rẻ
Hosting quốc tế giá rẻ

Footer

Liên kết hữu ích

  • Get themeforest giá rẻ
  • Đối tác
  • Download
  • Review
  • Kinh nghiệm
  • Hosting Việt

Bình luận mới

  • Học Luật trong GIẢM 25% Dịch vụ Cloud VPS, Hosting hoặc NHÂN ĐÔI RAM, Tặng đến 12 tháng sử dụng
  • MrHuy trong Get Envato Elements miễn phí – Download Free Elements Envato
  • Nam trong Dịch vụ Get Themeforest giá rẻ❤️Mua theme WordPress bản quyền giá rẻ
  • Phong trong Get Envato Elements miễn phí – Download Free Elements Envato
  • vincare trong Get Envato Elements miễn phí – Download Free Elements Envato

Bạn bè

  • NamLee Blog
  • Thắng Đặng Blog
  • Mua theme WordPress giá rẻ
  • Diễn đàn học tập
  • Trường THPT Mỹ Đức A
  • Món ngon mỗi ngày
  • Tuấn.dev
  • Blog Tin Học
  • Tiền Minh Vy – tienminhvy.com

Copyright © 2014 by Thành Thái Blog - Sử dụng Hawkhost kết hợp dịch vụ Mua theme Wordpress bản quyền

  • Giới thiệu
  • Liên hệ
  • Thanh toán
  • Policy
wpDiscuz