当表格中的img标签时,如何正确缩放图像大小?

时间:2013-11-21 21:46:41

标签: html css image

我有一个png grpahic,上面有几个图标。该项目的目标是可访问性,因此客户端希望使用img标签和alt属性,而不是使用带有地图图像和背景定位的div。我们正在使用设置img{max-width: 100%;}的Twitter引导程序。此图像在具有50px乘50px尺寸的表格单元格内呈现。图像为329像素×100像素。这使得图像非常小,当然也显示了所有图标。我正在考虑使用CSS剪辑并提供类来显示我想要的图形。这里的正确方法是什么?我正在设置td { position: relative;}img { max-width: none; position: absolute; clip: rect(9px, 184px, 34px, 155px) }这样做对我来说似乎很烦人。我可以使用更好的方法吗?我只是想利用屏幕阅读器功能的图像以及良好的HTML设计原则。我的css(LESS语法)看起来像这样

.tinytable img {
   max-width: none;
   background: red;
   &.onetime {
    position: absolute;
    clip: rect(9px, 184px, 34px, 155px);
    &:hover{
        cursor: pointer;
    }
  }
}

我需要使用左和上等...来正确定位它。我发现使用背景图像和背景位置这一切都变得更加容易,但这似乎并不那么容易理解。我们也试图尽可能使用精灵。有没有办法根据背景大小和背景位置做我想做的事情。由于某些原因,剪辑对我来说似乎不可靠,不用太多提及我在Chrome或Firefox中调试时可以看到整个图像块容器。有人有任何想法吗?我确信这是一个相当普遍的问题。

0 个答案:

没有答案