Hình ảnh phù hợp với ô bảng [HTML thuần túy]

Question

Làm cách nào để tôi vừa với hình ảnh trong bảng td ô? [HTML thuần túy]

Tôi đã thử mã bên dưới để vừa với hình ảnh trong ô td bảng.

HTML đang ở đây:

<table border="1" bordercolor="#aaa" cellspacing="0" cellpadding="0"> 
<tr> 
    <td><img width="100%" height="100%" src="http://dummyimage.com/68x68/000/fff" /></td> 
</tr> 
</table> 

Như bạn có thể thấy trong ảnh chụp màn hình sau đây và trong JsFiddle DEMO, hình ảnh không phù hợp để td tế bào.

Shot:

am i làm gì sai?

Mọi đề xuất sẽ thật tuyệt vời.

Answer 1

nội dung Inline lá không gian ở phía dưới cho các ký tự mà xuống (j, y, q):

https://developer.mozilla.org/en-US/docs/Images,_Tables,_and_Mysterious_Gaps

Có một vài sửa:

Sử dụng display: block;

<img style="display:block;" width="100%" height="100%" src="http://dummyimage.com/68x68/000/fff" /> 

hoặc sử dụng vertical-align: bottom;

<img style="vertical-align: bottom;" width="100%" height="100%" src="http://dummyimage.com/68x68/000/fff" /> 

Answer 2

Sử dụng công cụ của nhà phát triển bạn chọn và kiểm tra xem tr, td hoặc img có bất kỳ phần đệm hoặc lề nào không.

Answer 3

Đó là tất cả về display: block :)

Cập nhật:

Ok vì vậy bạn phải bàn, tr và td thẻ:

<table> 
    <tr> 
    <td> 
     <!-- your image goes here --> 
    </td> 
    </tr> 
</table> 

phép nói rằng bạn table hay td (bất cứ điều gì xác định chiều rộng của bạn) có thuộc tính width: 360px;. Bây giờ, khi bạn cố gắng thay thế nhận xét html bằng hình ảnh thực tế và đặt thuộc tính hình ảnh đó thành ví dụ width: 100%;, hãy điền đầy đủ vào ô td mà bạn sẽ gặp phải sự cố.

Vấn đề là ô bảng của bạn (td) không được điền đúng hình ảnh. Bạn sẽ nhận thấy không gian ở dưới cùng của ô mà hình ảnh của bạn không che phủ (nó giống như 5px đệm).

Cách giải quyết vấn đề này một cách đơn giản nhất?

Bạn đang làm việc với các bảng, phải không?Bạn chỉ cần thêm hiển thị tài sản để hình ảnh của bạn để nó có những điều sau:

img { 
    width: 100%; 
    display: block; 
} 

Answer 4

nếu bạn muốn làm điều đó bằng dung HTML thuần túy, bạn có thể xóa biên giới trong bảng nếu bạn muốn. ..or bạn có thể thêm align = "center" thuộc tính vào thẻ img của bạn như thế này:

<img align="center" width="100%" height="100%" src="http://dummyimage.com/68x68/000/fff" /> 

thấy fiddle: http://jsfiddle.net/Lk2Rh/27/

nhưng nó vẫn tốt hơn để xử lý này với CSS, tôi đề nghị bạn đó.

• Tôi hy vọng sự trợ giúp này.