在表格和寬度中格式化圖像的困難

Question

我正在創建表格，並且我正在嘗試將圖片添加到<td>字段之一中。這是我擁有的一個圖標，我希望它能顯示出現的每條記錄。圖片的實際大小是64px64px。我試圖讓它達到36x36，所以我設置了寬度和高度，但它並沒有考慮到這一點，並且它切斷了它的兩側。此表的另一個問題是我的index_announcements_wrap設置爲100％，但是當我嘗試添加<td>的寬度屬性時，它會更加混亂，並且當我向消息添加40％以上時表格不會向右擴展。

我創建了一個小提琴來展示一切，讓每個人都更容易看到我在做什麼。我希望表格的列是容器的100％，並且要在紅色條的下方延伸整個寬度。

https://jsfiddle.net/9w5jsd06/

Answer 1

你需要考慮的背景大小，目前它的設置覆蓋，因此圖像覆蓋容器的空間，而是使用含有以顯示它AS IS和使用no-repeat避免圖像從重複。

變化：

background-size: cover; 

要：

background-size: contain; 
background-repeat: no-repeat; 

這裏是如此它也響應我會怎麼做：

.wrapper { 
 
    border: solid 1px #C0C0C0; 
 
    border-radius: 8px; 
 
    padding: 10px; 
 
    min-height: 80px; 
 
    text-align: center; 
 
    box-sizing: content-box; 
 
} 
 
header { 
 
    border: solid 1px #800000; 
 
    border-radius: 8px; 
 
    padding: 10px; 
 
    background: #800000; 
 
    color: white; 
 
} 
 
.warning_image { 
 
    width: 36px; 
 
    height: 36px; 
 
} 
 
.col-3 { 
 
    display: inline; 
 
    float: left; 
 
    width: 32%; 
 
} 
 
@media (max-width: 640px) { 
 
    .col-3 { 
 
     width: 100%; 
 
     display: block; 
 
    } 
 
    .wrapper { 
 
     min-height: 170px; 
 
    } 
 
}

<div class="wrapper"> 
 
    <header> 
 
      League Announcements: 
 
    </header> 
 
    <section> 
 
     <div class="col-3"> 
 
      <img class="warning_image" src="http://png-2.findicons.com/files/icons/1609/ose_png/256/warning.png" alt=""> 
 
     </div> 
 
     <div class="col-3"> 
 
      <p>FROM: <?php echo date('Y-m-d'); ?></p> 
 
     </div> 
 
     <div class="col-3"> 
 
      <p>Work for me!</p> 
 
     </div> 
 
    </section> 
 
</div>

Answer 2

設置display: block爲您.index_announcement_pic class

fiddle here

Answer 3

.index_announcement_pic { 
    background: url("http://png-2.findicons.com/files/icons/1609/ose_png/256/warning.png") no-repeat; 
    width: 36px; 
    height: 36px; 
    background-size: contain; 
    background-position: center; 
    padding: 8px; 
    position: absolute; 

與CSS你.index_announcement_pic替換此它會正常工作

Answer 4

，如果你想顯示您的圖片36 * 36，那麼你需要做的像這 http://png-2.findicons.com/files/icons/1609/ose_png/256/warning.png

，而不是

.index_announcement_pic { 
background-image: url("http://png-2.findicons.com/files/icons/1609/ose_png/256/warning.png"); 
width: 36px; 
height: 36px; 
background-size: cover; 
background-position: center; 
padding: 8px; 
/*position: absolute;*/ 
/*margin-right: 10%; 
margin-left: 10%;*/ 
} 

<td class="index_announcement_pic"></td> 

做到這一點

.index_announcement_pic { 
width: 36px; 
height: 36px; 
padding: 8px; 

} 
    <td > 
    <img src="http://png-2.findicons.com/files/icons/1609/ose_png/256/warning.png" class="index_announcement_pic"> 
    </td>