CSS – Max Width và Max Height

Vấn đề

Bạn chỉ muốn ảnh của bạn hiển thị chọn trong vùng (400px X 400px)?

Giải pháp

W3C đã tạo ra các thiết lập CSS để làm việc này một vài năm trước:

.mainimage

{
max-width: 400px;
max-height: 400px;
}

Đoạn style trên hoạt động tốt với Firefox 3, Safari, Opera, và thậm chí Google Chrome. Nhưng nó lại không hoạt động với IE6, IE7!

Giải pháp cho tất cả các trình duyệt (Browser)

Nếu bạn sử dụng style dưới đây thì nó sẽ hoạt động trong tất cả các trình duyệt:

.mainimage {
max-width: 400px;
max-height: 400px;
width: expression(this.width > 400 ? “400px” : true);
height: expression(this.height > 400 ? “400px” : true);
}

Sau đó bạn chỉ việc sử dụng style này cho image.

Nếu bạn sử dụng expression() với static string như trên thì nó sẽ không hoạt động trong IE6,IE7.

Hãy sửa style bên trên như sau:

.mainimage {
max-width: 400px;
max-height: 400px;
width: expression(this.width > 400 ? 400 + “px” : true);
height: expression(this.height > 400 ? 400 + “px” : true);
}

Gửi phản hồi

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Log Out / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Log Out / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Log Out / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Log Out / Thay đổi )

Connecting to %s