myimg {background-image：url（“ pic.jpg”）;背景尺寸：封面；}

Question

我有一个1513x1079的图片，当我调整桌面浏览器的大小时，该图片的大小会很大。但是，当我在Android手机上打开相同的网页时，除图片外，其他所有内容均显示良好。整个页面可以正确调整大小，但是没有图片。左上角只有一个很小的图片图标。

手机的图像尺寸是否有上限？如果是这样，为什么会有这样的限制？图片响应度有某种尺寸限制吗？

HTML代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <meta name = "viewport" content = "width=device-width, initial-scale = 1"/>
        <title>Projects web page</title>
        <link rel="stylesheet" href="bootstrap.min.css"/>
        <script src="jQuery-3.3.1.min.js"></script>
        <script src="bootstrap.min.js"></script>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>



    <body>
        <div class = "container-fluid">
            <div class = "row">
                <div class = "col-md-6" id = "picture">
                    <img src="R1lr_cut.jpg" alt = "R1 Engine" class = "responsive"/>
                </div>

                <div class = "col-md-6" id = "home_text">
                    <h1>Inline 4 Engines</h1>
                    <ul id = "links">
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Details</a></li>
                        <li><a href="#">Calculate</a></li>
                        <li><a href="#">About</a></li>
                    </ul>

                    <div id = "filler_text">
                        <h4>Historic information</h4>
                        <p>
                            The first across-the-frame 4-cylinder motorcycle was the 1939 racer Gilera 500 Rondine, it also had double-over-head camshafts, forced-inducting supercharger and was liquid-cooled.
                        </p>
                        <p>
                            Modern inline-four motorcycle engines first became popular with Honda's SOHC CB750 introduced in 1969, and others followed in the 1970s. 
                            Since then, the inline-four has become one of the most common engine configurations in street bikes. 
                        </p>
                        <p>
                            Outside of the cruiser category, the inline-four is the most common configuration because of its relatively high performance-to-cost ratio.
                        </p>

                        <p>
                            The success of the Honda CB750 and the Kawasaki Z1 got the attention of the Germans over at BMW. The Honda especially had been an industry game changer. 
                            BMW’s motorcycle engine at that time was a horizontally opposed “boxer” twin cylinder engine that the company had settled on when they reverse engineered a British Douglas motorcycle with a boxer engine mounted longitudinally in the frame at the end of the First World War.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

CSS代码：

body {
    background-color: #000000;
    }

.responsive {
    width:100%;
    height: auto;
    }


#picture {
    padding-right: -10%;
    padding-top: 3%;
    width: 100%;
    }

#links li{
    list-style-type: none;
    float:left;
    /*outline : 1px solid yellow;*/
    width: 14%;
    margin-right: 11%;
    padding-top: 0.5%;
    padding-bottom: 0.5%;
    }

#links{
    /*outline: 1px solid red;*/
    width: 100%;
    padding-left: 0.5%;
    }


a {
    /*outline :1px solid green;*/
    display: block;
    text-align: center;
    padding: 3%;
    color: #666666;
    }

a:hover {
    background-color:  #333333;
    color:#66ccff;
    }

#home_text {
    background-color: black;
    padding-top: 8%;
    color: #FFFFFF;
    padding-left: 0%;
    }

#home_text h1 {
    margin-left: 5%;
    /*outline: 1px solid purple*/
    }

#filler_text {
    padding-top: 12%;
    margin-left: 5%;
    }

Answer 1

确保将图像尺寸设置为百分比，而不是像素或其他任何形式。示例：

<img src="yourimage.png">
<style>
img{width: 100%; /*100 can be any, but will fit 100% of the block*/}
</style>

Answer 2

您还可以将图像设置为块背景：

myimg {background-image：url（“ pic.jpg”）;背景尺寸：封面；}

Sorry if syntax is wrong, just typing from my phone. Also you can try doing like this instead of making it a block: img {display：inline-block;} ` 如果这样做没有帮助，请逐行更改内联代码。

Android浏览器中的网页-图像尺寸

2 个答案:

myimg {background-image：url（“ pic.jpg”）;背景尺寸：封面；}