Question

我试图弄清楚如何通过css响应直接加载单个图形。

如果我调整屏幕大小，那么graphis就会重新开始。但如果我有手机显示，那么图形将超过字体。现在我想知道如何让图形变得更小，以适应各种尺寸。

我正在使用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*/
}

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

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" />

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

如何通过bootstrap css响应加载图形？

2 个答案: