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.
