html - 如何在CSS中使用高度和宽度百分比的图像

Question

HTML

 <li ><a id="restaurant" href="/restaurant.htm"></a></li>

我在这里放置一张 id=restaurant 的图片，它在这里工作正常我的问题是当我在 css 中为移动设备或表格使用媒体标签时，大小应该是 % 那么我如何为移动设备和平板电脑使用 css？实际上图像大小是 height=560 width=280，当悬停时我们应该显示图像高度的一半，另一半将显示。

还有一点，如何将手机的图像宽度设置为 100%，负值是按百分比计算的吗？？？

CSS

#restaurant
    {display: block;
      width: 280px;
      height: 278px;
      background: url(../images/page/restaurantMarketing1.jpg)  no-repeat;}

    #restaurant:hover
    {background-position: 0 -278px;}

Answer 1

由于您将图像设置为背景，请使用 background-size属性来设置它的大小。

谎言

#restaurant
{
  display: block;
  width: 280px;
  height: 278px;
  background: url(../images/page/restaurantMarketing1.jpg)  no-repeat;
  background-size: 50%;
}
#restaurant:hover
{
 background-position: 0 -278px;
 background-size: 100%;
}