使用css响应地调整按钮标记内的图像和文本大小

时间:2017-10-11 21:20:53

标签: css image button responsive

我有这个: .buttm {     background:url('http://redshadow67.com/deepest/img/butts/divm.png')无重复中心黑色;     宽度:100px; text-align:center;颜色:#f5c324; font-size:18px;保证金:0自动;边框:0px; }

但我想根据视图屏幕将宽度设置在60到100之间。当我使用百分比时,它不会调整图像的大小,而且我还需要文本稍微小一些。不知道该怎么办???感谢

2 个答案:

答案 0 :(得分:0)

您是否尝试过媒体查询?



@media only screen and (min-width: 1024px) {
  // Your custom styles go here.
}




答案 1 :(得分:0)

要缩放背景图像,请使用background-size property。尝试使用值contain(显示完整图像)和cover(缩放图像以填充整个元素)。

对于宽度和字体大小,请使用@media个查询。您可能还想查看viewport relative units

  • 1vh:视口高度的1%
  • 1vw:视口高度的1%
  • 1vmin:视口高度或宽度的1%,以较小者为准
  • 1vmax:视口高度或宽度的1%,以较大者为准