如何使通过引导 css 加载的图形响应

Question

im试图弄清楚如何制作通过CSS响应直接加载的单个图形。

如果我调整屏幕大小，那么图形就会变得摇摆不定。但是如果我有手机显示屏，那么图形就会超过字体。现在我想知道如何让图形变得更小，以适应所有尺寸。

我使用引导 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*/
}

或者，您可以使用最大宽度和预置宽度的内容，因此横幅将始终保持比例。（这仍然需要您使用媒体查询，除非您希望横幅在笔记本电脑屏幕尺寸中占据大量屏幕。

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*/
}

希望这有帮助！

Answer 2

使用 CSS 媒体查询设置您希望设置应用于的最大视口大小

    img
    {
        height: 500px;
        width: 700px;
    }
    @media screen and (max-width:640px)
    {
      img
      {
        height: 200px;
        width: 250px;
      }
    }

    <img src="https://fanart.tv/api/download.php?type=download&image=13138&section=3" />

全屏运行上面的代码片段并调整浏览器大小以查看更改。