9
Tôi có một số table có hình ảnh trong các ô của nó. Tôi muốn những hình ảnh này tự động thu nhỏ khi chiều rộng cửa sổ bị giảm. Nhưng họ nên không mở rộng ra ngoài kích thước gốc của chúng khi có thêm không gian xung quanh.Thu nhỏ kích thước hình ảnh để vừa với ô bảng, hoạt động trong tất cả các trình duyệt?
Tôi có giải pháp cho tính năng này hoạt động trong Chrome, nhưng nó không hoạt động trong Firefox hoặc Internet Explorer. Trên Firefox và Internet Explorer, hình ảnh không co lại khi chiều rộng cửa sổ bị giảm và thay vào đó một cuộn sẽ xuất hiện.
Làm cách nào để nó hoạt động trên tất cả các trình duyệt?
JSFiddle:http://jsfiddle.net/ahmadka/GeDxr/
CodePen (JSFiddle là: Tràng Cát):http://codepen.io/anon/pen/JhsED
HTML:
<div class="imageTable">
<table>
<tbody>
<tr>
<td>
<img class="autoResizeImage" src="http://173.254.28.69/~bluraysp/web/images/footer/payment/normal/moneybookers.png" />
</td>
<td>
<img class="autoResizeImage" src="http://173.254.28.69/~bluraysp/web/images/footer/payment/normal/2checkout.png" />
</td>
<td>
<img class="autoResizeImage" src="http://173.254.28.69/~bluraysp/web/images/footer/payment/normal/visa.png" />
</td>
<td>
<img class="autoResizeImage" src="http://173.254.28.69/~bluraysp/web/images/footer/payment/normal/mastercard.png" />
</td>
</tr>
</tbody>
</table>
</div>
CSS:
.autoResizeImage {
max-width: 100%;
height: auto;
width: auto;
}
Hmm ... Tôi đồng ý rằng trong JSFiddle, giải pháp được đề xuất không hoạt động, nhưng khi tôi áp dụng nó trên trang thực tế của tôi, hình ảnh ô trở nên lớn hơn kích thước gốc của chúng. Bạn có thể nhìn thấy nó ở đây: http://blu-rays.pk/index.php .. Đi đến phía dưới, ở phần chân trang, và ở giữa bạn sẽ thấy các biểu tượng tương tự .. – Ahmad
Tôi đã xác nhận rằng cùng một CSS được áp dụng trong trang thực tế của tôi (chỉ có tên quy tắc đã được thay đổi từ 'autoResizeImage' thành' autoResizeTableImage'). Mọi thứ khác đều giống nhau, vì vậy tôi không biết tại sao hình ảnh đang mở rộng ở đó .. Và điều này cũng xảy ra trong Chrome! – Ahmad