如何在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%;
}

Answer 2

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

只是放百分比而不是像素。

或者像这样放置：

<li>
<a id="restaurant" href="/restaurant.html">
<img src="./images/page/restaurantMarketing1.jpg" id="restaurant-img"/>
</a>
</li>

这样你可以按照自己的意愿操纵图像

Answer 3

尝试最大宽度为100％的img标记：

<li ><a id="restaurant" href="/restaurant.htm"><img src="../images/page/restaurantMarketing1.jpg" style="width:560px;height:280px;max-width:100%;"></a></li>

Answer 4

如果您有很多移动特定样式，请尝试使用媒体查询来进行响应式设计 这样的方式：

/*this is only apply when screen width is less than or equal 768px
@media only screen and (max-width : 768px){
 #restaurant{
   width:100%;/*or whatever you want*/
 }
}

有关媒体查询的详情，click here

否则，只需使用max-width即可。