Question

.responsive td.head1:before {
    content: url(myimage.png )
}

我想将图片放入响应表格列中（我使用此列将列标题按照CSS Tricks here中描述的类似方式排列。不同之处在于我的＆＃39;标题包含图像。这些图像需要重新缩放以适应，我似乎使用背景大小这样的东西画一个空白。那么有没有办法重新缩放/调整图像大小？

更新：感谢您对使用背景图片的建议 - 如果有人可以告诉我一种获取图片的方式，您可以获得奖励积分：在带有alt / description标签的段之前残疾人合规。

Answer 1

在此项目中附加背景图片，例如：http://jsfiddle.net/4rB5X/1/

.responsive th:nth-child(1):before {
    content: "";
    position: relative;
    display: inline-block;
    width: 30px;
    height: 30px;
    background-image: url(http://www.placehold.it/30x30);
    background-repeat: no-repeat;
    background-position: top left;
    vertical-align: middle;
}

th
{
    vertical-align: middle;
}

使用这些图片的alt标记解决您的问题：

您可能确实使用content作为伪alt-tag。您可以使用属性来定义所需的文本。这是一个例子：

http://jsfiddle.net/4rB5X/2/

CSS

/* Puts the data-img-alt value of the <th> as content */
.responsive th:nth-child(1):before {
    content: attr(data-img-alt);
}

/* Hide Text from content */
th.hide-text:before
{
  text-indent: -99999px;
  overflow: hidden;
  text-align: left; 
}

HTML

<thead>
  <th class="hide-text" data-img-alt="Lalala">Test</th>
  <th>Test</th>
</thead>

<强>更新

与@vogomatix pointet out一样，content属性不能为null，但至少有一个空字符串（content:"";可以）。要解决此问题，请尝试以下方法：

th:before
{
  content: "";
}

th[data-img-alt]:before
{
  content: attr(data-img-alt);
}

Answer 2

您可以为班级提供背景图片并为其设计样式。试试这个......

name{
background-image:url("url here");
background-size:80px 60px;
}

缩放图像内容：在CSS部分之前

2 个答案: