Css canh giữa khung hình cho mọi trình duyệt - DIỄN ĐÀN_VNTAMTAY
[ Tin nhắn mới · Thành viên · Quy tắc diễn đàn · Tìm kiếm · RSS]
THỐNG KÊ DIỄN ĐÀN
BÀI VIẾT MỚICHỦ ĐỀ SÔI ĐỘNGTHÀNH VIÊN TÍCH CỰCTHÀNH VIÊN MỚI
  • Khế ước xã hội... (1)
  • Tứ đại danh bổ... (1)
  • English For Bu... (1)
  • từ điển oto dạ... (2)
  • Thống kê 4rum ... (2)
  • Tăng font chữ ... (13)
  • Tổng Hợp về YA... (13)
  • Tử vi năm Nhâm... (11)
  • Phong thủy cho... (10)
  • Thái cực quyền... (8)
  • TieuBao
  • kcdl
  • 12a3
  • kunkun
  • Quada09
  • duyle207
  • anhlongho
  • nguyendan11061106
  • trunguyencong14
  • htsphantam
  • Page 1 of 11
    DIỄN ĐÀN_VNTAMTAY » THƯ VIỆN WEBSITE » CODE CHO WEBSITE - FORUM » Css canh giữa khung hình cho mọi trình duyệt (Css canh giữa khung hình cho mọi trình duyệt)
    Css canh giữa khung hình cho mọi trình duyệt
    TieuBaoNgày: Chủ nhật, 06-Apr-14, 11:19:19 | Bài viết # 1


    Nhóm: Administrator
    Số bài viết: 3090
    Khen thưởng: 3
    Được cảm ơn: 10001
    Trạng thái: Offline
    Việc canh giữa khung hình được áp dụng trên nhiều trang web, nhất là những trang bán hàng online cần show nhiều hình sản phẩm. Việc canh hình dù có kích thước lớn hay nhỏ đều nằm trong khung hình cố định và được canh giữa khung là một chuyện không dễ. Nhất là đối với người dùng ở Việt Nam còn sử dụng nhiều phiên bản trình duyệt đã lỗi thời. Tuy nhiên, mọi việc sẽ trở nên dễ dàng hơn nếu bạn biết chút ít về CSS và HTML. Bài viết sau đây sẽ hướng dẫn bạn thực hiện việc này.

    Trong thiết kế giao diện, việc chia tỉ lệ hình ảnh và khung hình đồng thời cố định size khung hình thường thấy ở nhiều trang web. Tuy nhiên, phải làm sao đảm bảo việc size của hình được upload lên không phụ thuộc vào size khung ảnh. Cụ thể là cho dù bạn up hình có chiều rộng hay cao như thế nào(có thể vượt quá khung hình hoặc nhỏ hơn khung hình) nhưng nó vẫn nằm trong khung hình và phải nằm chính giữa khung hình.

    Với yêu cầu như vậy ta có code HTML như sau:

    Quote
    <div class="img-wrap">
    <img src="canh-giua-hinh.jpg" />
    </div>


    Và CSS:

    Quote
    .img-wrap {
    background:#fff;
    width:500px;
    height:400px;
    position:relative;
    display:block;
    }
    .img-wrap img{
    max-width:500px;
    max-height:400px;
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    margin:auto;
    }

    Như ví dụ trên, khung hình cố định rộng x cao = 500px x 400px, với CSS như trên thì hình nằm trong khung sẽ được canh giữa khung và không bao giờ vượt qua khỏi khung cho dù chiều cao hay rộng của hình lớn hơn chiều cao hoặc rộng của khung. Tuy nhiên, CSS trên làm việc tốt ở các trình duyệt web mới và trình duyệt IE8 trở lên. Để IE7 (hiện tại còn khá nhiều người sử dụng) hiển thị tốt thì ta cần thêm đoạn CSS sau cho thẻ img:

    Quote
    margin-left:expression((500-this.width)/2);
    margin-top:expression((400-this.height)/2);
    Như vậy CSS đầy đủ sẽ là :

    .img-wrap {
    background:#fff;
    width:500px;
    height:400px;
    position:relative;
    display:block;
    box-shadow:0 0 10px #ccc;
    border:1px solid #ccc;
    margin:0 auto;
    }
    .img-wrap img{
    max-width:500px;
    max-height:400px;
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    margin:auto;
    margin-left:expression((500-this.width)/2);
    margin-top:expression((400-this.height)/2);
    }

    Chúc bạn thành công.



    TRẺ DÙNG SỨC KHỎE KIẾM TIỀN-GIÁ DÙNG TIỀN MUA SỨC KHỎE

    NHỮNG GÌ CON NGƯỜI KHÔNG NGHĨ TỚI LẠI XẢY RA TRONG ĐỜI
     
    DIỄN ĐÀN_VNTAMTAY » THƯ VIỆN WEBSITE » CODE CHO WEBSITE - FORUM » Css canh giữa khung hình cho mọi trình duyệt (Css canh giữa khung hình cho mọi trình duyệt)
    Page 1 of 11
    Search:

    click ủng hộ vntamtay
    Chát với Tôi
    300
    Liên kết quảng cáo
    Buôn bán phụ tùng!
    Đang truy cập
    Khu đăng nhập
    Video Clip

    TRAN TRI THIEU NU KHOA ...

    00:03:41
    1 0 0.0
    Tỷ giá tiền tệ