android - Android 浏览器中的网页

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

转载作者：行者123 更新时间：2023-11-28 00:58:49

25

4

我有一张 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%;
    }

最佳答案

确保您的图片大小设置为百分比，而不是像素或其他任何单位。示例:

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

关于android - Android 浏览器中的网页 - 图像尺寸，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52795954/

25

4

0

文章推荐： c++ - fatal error LNK1120 : 1 unresolved externals in c++

文章推荐： javascript - 使用JS循环打字效果

文章推荐： javascript - Highcharts 区域填充

文章推荐： javascript - 自己的物理引擎 : Bouncing doesn't stop

c - 为什么这个 malloc 包装器对请求的内存大小执行此操作？尺寸 = (尺寸 + 3) & ~3;
我正在查看 DOOM 源代码，我找到了 this行。 void * Z_Malloc (int size, int tag, void *user)
window 尺寸
关闭。这个问题需要details or clarity .它目前不接受答案。想改进这个问题吗？通过 editing this post 添加细节并澄清问题. 关闭 9 年前。 Improve t
c++ - 如何获得特征矩阵的形状(尺寸)？
我正从 Python 和 Numpy 转向 C++ 和 Eigen。在 Python 中，我可以使用 .shape 属性获取 Numpy 数组/矩阵的形状(维度)，如下所示: import nump
youtube - 嵌入YouTube:尺寸
固定嵌入式YouTube视频的宽度并自己照顾自己的高度是否安全？我有一个应用程序，用户可以将通知发布到公告板上。这些通知主要是文本(带有有限的html标签)和嵌入式图像。我现在要添加对嵌入式YouT
javascript - 创建后如何更改盒子的尺寸/尺寸？
可以轻松创建一个 THREE.BoxGeometry，在创建宽度、高度和深度的三个独立参数时，您必须在其中传递参数。我想创建任何和所有不带参数的THREE[types]()，并在之后设置值。有没有
JavaScript Canvas 尺寸
我在 HTML 页面上有一个 Canvas : 属性width和height将 Canvas 拉伸(stretch)到某个字段，但不调整其大小。所以 var canvasElement = docu
CSS 定位/尺寸
我在我的 css 中使用 @media all 和 (max-width: 600px) {} 作为响应式菜单，问题是它没有正确显示。我想让橙色填充绿色空间……当然，还要将绿色空间变成透明的。基本上
c++ - 尺寸、长度换算？
(我知道我问了很多关于这个的问题!) 基本上，我正在尝试将一些代码从 Matlab 转换为 C++，我遇到了这个: n = sum(size(blocks)) - len; 现在我计算了 vector
javascript - 选择类别然后显示类别.尺寸
您好，我有一个用于创建产品的表单。用户应该能够选择类别(例如 T 恤)，然后 T 恤的所有尺码(例如 S、M、L)都会下拉。用户可以输入每种尺寸的数量。 Javascript 对此不起作用。用户可以选
html - 尺寸、对齐方式和列表样式等社交图标命令对页脚没有任何影响
我正在尝试在页脚中定位和调整我的社交图标链接的大小，但是，这些命令似乎都没有效果，尤其是当我尝试调整它们的大小时。我试过将宽度和高度标记为“!重要”，但这也没有效果。这是代码的 JSFiddle:h
canvas - 给定特定尺寸的最大潜在 PNG 尺寸
我目前正在创建一个 HTML5 canvas基于绘图程序。用户可以绘制一张图像或几张图像“页面”，并将其保存到云端以供日后快速检索。这是用于交互式白板的；老师不能总是确定他们计划类(class)使用的
image - 如何为网页保存图像？ (格式/尺寸)
为网站存储图像的最佳方式是什么？我不应该超过什么尺寸？现在，我将所有界面文件保存在 png(主要是 Sprite )中，并将常用图像保存在 jpg 中。一些图像大约为 100-150Kb。保存图
jquery - fancybox iframe 尺寸
在 fancybox 主页 ( http://fancybox.net/home ) 中，有一个打开尺寸为屏幕 75% 的 iFrame 的示例。我无法按照网站上的说明通过修改 .js 文件的宽度和
iPhone 4 Nib 尺寸
我想做一个仅适用于 iPhone 4 的应用程序，该应用程序使用 iAd AdBannerView。当我添加它时，它的固定大小为 320x50。在更高分辨率下这如何工作？有人可以解释一下 iPhon
cocoa - 旋转的 NSString 尺寸
我们有一个 NSString，我们使用 - (NSSize)sizeWithAttributes:(NSDictionary *)attributes 来测量边界框。一切都好。现在我们使用标准 NS
delphi - 如何仅通过知道其句柄来确定 Canvas 尺寸？
我想知道 Canvas 的宽度和高度，但我只知道它的 HDC。我尝试过这段代码: procedure TForm92.Button1Click(Sender: TObject); var hBi
javascript - 旋转路径后计算 SVG 尺寸
问题是如何使用数学从 START SVG 维度(不带旋转)和 END SVG 维度(带旋转)获取 >开始 SVG 信息。基本上，要从 START SVG 到 END SVG，我需要执行 -115.60
oracle - 鱿鱼进口 Parquet 尺寸
我的问题是，我有一个包含50万行的Oracle表。我设置了sqoop以将其作为 Parquet 文件导入到HDFS。我将--num-partition参数设置为32，得到了32个 Parquet 文件
wordpress - YouTube 尺寸 WordPress
是否可以更改 WordPress 中当前主题的 YouTube(或其他视频)的默认嵌入尺寸？我搜索了一个插件和一些代码，但似乎找不到。我的意思是当您将 YouTube 网址粘贴到帖子或页面中时使用的
JavaFX 缩小 ImageView 尺寸
我有一个组，其中包含一个矩形和顶部的图像。我希望矩形可以调整大小，并且图像应该具有固定大小，除非矩形小于图像的情况。然后图像应该随着矩形缩小。图像还应该始终居中并有一些填充。除了图像的缩小尺寸部分

首页

博学

6Ren·AI

商城

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