Làm cách nào để duy trì tỷ lệ co khi chia tỷ lệ hình ảnh bằng một thứ nguyên (CSS) trong IE6?

Đây là vấn đề. Tôi có một hình ảnh:

<img alt="alttext" src="filename.jpg"/>

Lưu ý không chỉ định chiều cao hoặc chiều rộng.

Trên một số trang nhất định, tôi chỉ muốn hiển thị một hình thu nhỏ. Tôi không thể thay đổi html, vì vậy tôi sử dụng CSS sau:

.blog_list div.postbody img { width:75px; }

Cái nào (trong hầu hết các trình duyệt) tạo ra một trang có hình thu nhỏ rộng đồng nhất, tất cả đều có tỷ lệ khung hình được bảo toàn.

Tuy nhiên, trong IE6, hình ảnh chỉ được chia tỷ lệ theo kích thước được chỉ định trong CSS. Nó vẫn giữ được chiều cao 'tự nhiên'.

Dưới đây là ví dụ về một cặp trang minh họa vấn đề:

• Danh sách sẽ hiển thị hình thu nhỏ
• Một bài đăng trên blog, hiển thị hình ảnh ở kích thước đầy đủ.

Tôi rất biết ơn vì tất cả các đề xuất, nhưng tôi muốn chỉ ra rằng (do những hạn chế của nền tảng khách hàng đã chọn) Tôi đang tìm kiếm thứ gì đó không liên quan đến việc sửa đổi html. CSS cũng sẽ thích hợp hơn javascript.

CHỈNH SỬA: Nên đề cập rằng hình ảnh có kích thước và tỷ lệ khung hình khác nhau.

Adam Luter đã cho tôi ý tưởng về việc này, nhưng nó thực sự hóa ra rất đơn giản:

img {
  width:  75px;
  height: auto;
}

IE6 hiện đã chỉnh sửa hình ảnh tốt và đây dường như là thứ mà tất cả các trình duyệt khác sử dụng theo mặc định.

Cảm ơn cả hai câu trả lời mặc dù!

Tôi rất vui vì điều đó đã thành công, vì vậy tôi đoán bạn phải đặt rõ ràng 'tự động' trên IE6 để nó bắt chước các trình duyệt khác!

Thực sự gần đây tôi đã tìm thấy một kỹ thuật khác để chia tỷ lệ hình ảnh, một lần nữa được thiết kế cho nền. Kỹ thuật này có một số tính năng thú vị:

1. Tỷ lệ khung hình hình ảnh được giữ nguyên
2. Kích thước ban đầu của hình ảnh được duy trì (nghĩa là nó không bao giờ có thể thu nhỏ mà chỉ phát triển)

Đánh dấu dựa trên một phần tử trình bao bọc:

<div id="wrap"><img src="test.png" /></div>

Với đánh dấu ở trên, bạn sử dụng các quy tắc sau:

#wrap {
  height: 100px;
  width: 100px;
}
#wrap img {
  min-height: 100%;
  min-width: 100%;
}

Sau đó, nếu bạn kiểm soát kích thước của wrapper, bạn sẽ nhận được các hiệu ứng quy mô thú vị mà tôi liệt kê ở trên.

Để rõ ràng, hãy xem xét trạng thái cơ sở sau: Vùng chứa có kích thước 100x100 và hình ảnh có kích thước 10x10. Kết quả là một hình ảnh được chia tỷ lệ 100x100.

1. Bắt đầu ở trạng thái cơ bản, vùng chứa được thay đổi kích thước thành 20x100, hình ảnh vẫn được thay đổi kích thước ở 100x100.
2. Bắt đầu ở trạng thái cơ bản, hình ảnh được thay đổi thành 10x20, hình ảnh thay đổi kích thước thành 100x200.

Vì vậy, nói cách khác, hình ảnh ít nhất luôn lớn bằng vùng chứa, nhưng sẽ mở rộng ra ngoài để duy trì tỷ lệ khung hình.

Điều này có thể không hữu ích cho trang web của bạn và nó không hoạt động trong IE6. Tuy nhiên, sẽ rất hữu ích khi có được một nền được chia tỷ lệ cho cổng hoặc vùng chứa chế độ xem của bạn.

Chà, tôi có thể nghĩ đến một bản hack CSS sẽ giải quyết được vấn đề này.

Bạn có thể thêm dòng sau vào tệp CSS của mình:

* html .blog_list div.postbody img { width:75px; height: SpecifyHeightHere; } 

Đoạn mã trên sẽ chỉ được thấy bởi IE6. Tỷ lệ khung hình sẽ không hoàn hảo, nhưng bạn có thể làm cho nó trông bình thường. Nếu bạn thực sự muốn làm cho nó hoàn hảo, bạn sẽ cần phải viết một số javascript để đọc chiều rộng hình ảnh gốc và đặt tỷ lệ tương ứng để chỉ định chiều cao.

Cách duy nhất để thực hiện chia tỷ lệ rõ ràng trong CSS là sử dụng các thủ thuật như tìm thấy ở đây .

Chỉ IE6, bạn cũng có thể sử dụng các bộ lọc (xem PNGFix ). Nhưng việc áp dụng chúng tự động vào trang sẽ cần javascript, mặc dù javascript đó có thể được nhúng vào tệp CSS.

Nếu bạn định yêu cầu javascript, thì bạn có thể chỉ cần điền javascript vào giá trị còn thiếu cho chiều cao bằng cách kiểm tra hình ảnh khi nội dung đã tải xong. (Xin lỗi tôi không có tài liệu tham khảo cho kỹ thuật này).

Cuối cùng, và thứ lỗi cho tôi vì hộp xà phòng này, bạn có thể muốn tránh sự hỗ trợ của IE6 trong vấn đề này. Bạn có thể thêm _width: autovào sau width: 75pxquy tắc của mình để IE6 ít nhất hiển thị hình ảnh một cách hợp lý, ngay cả khi nó có kích thước sai.

Tôi đề xuất giải pháp cuối cùng đơn giản vì IE6 đang trên đà phát triển: 20% và giảm gần một phần trăm mỗi tháng . Ngoài ra, tôi lưu ý rằng trang web của bạn là giải trí và ở Vương quốc Anh. Cả hai điều này đều giúp nhân khẩu học tránh xa IE6: Việc sử dụng IE6 giảm gần 40% trong những ngày cuối tuần (xin lỗi không trích dẫn) và Vương quốc Anh có nhân khẩu học IE6 thấp hơn nhiều (xin lỗi không trích dẫn).

Chúc may mắn!