html - 如何使通过 bootstrap css 加载的图形响应？

Question

我正在尝试弄清楚如何使通过 css 直接加载的单个图形具有响应性。

如果我调整屏幕大小，图形会变得更漂亮。但是如果我有手机显示屏，那么图形就会覆盖字体。现在我想知道如何让图形变得更小以适合所有尺寸。

我正在使用 bootstrap css。

附上你可以明白我的意思:

这是正常的样子

http://abload.de/image.php?img=graphic1biy1i.png

在小屏幕上是这样的

http://abload.de/image.php?img=graphic207zez.png

我怎样才能使图形重新缩放？

---

c_cont h1{
background: url("../images/titl_left.png") no-repeat scroll left 9px, url("../images/tit_rght.png") no-repeat scroll right 9px rgba(0, 0, 0, 0);    
color: #d4676b;
font-family: "Miama";
font-size: 37px;
margin:0 auto;
padding: 0px 0;
text-align: center;
width: 63%;
height:auto;
color: #fa6e05;

Answer 1

你称它的宽度为 63%，所以当屏幕缩小时，它仍然是 63%。一般来说，大屏幕的 63% 比手机的 63% 大。

您应该使用媒体查询来定位您希望图像缩小的时间。

即:

@media screen max-width (600px){
/*code goes here*/
}

或者，您可以使用 max-width 和 precentage width 之类的东西，这样横幅将始终保持比例。 (这仍然需要您使用媒体查询，除非您希望横幅占据笔记本电脑屏幕大小的大量屏幕。

c_cont h1{
max-width:600px;
width:100%; /* keeps your image scalable, but will take up 100% of the available width*/
height:auto; /*scales in proportion*/
}

希望这对您有所帮助!