格式化表格和宽度图像的困难

Question

我正在创建一个表，我正在尝试添加到<td>字段之一的图片。这是我的一个图标，我希望它显示每个显示的记录。图片的实际尺寸为64像素×64像素。我试图让它在36x36，所以我设置我的宽度和高度，但它没有采取它，它切断了它的侧面。这个表的另一个问题是我将index_announcements_wrap设置为100％，但是当我尝试添加<td>的width属性时，它更加混乱了图片，当我添加超过40％的消息时，表格没有向右扩展。

我创造了一个小提琴来展示一切，让每个人都更容易看到我在做什么。我希望表格的列是容器的100％，并且要在红色条下拉伸整个宽度。

https://jsfiddle.net/9w5jsd06/

Answer 1

你需要考虑背景大小，目前它设置为覆盖所以图像覆盖容器的空间，而是使用包含按原样显示它并使用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>