Question

我放了一张图片来通知我的网站正在建设中。这是一个800x600的图像，当您在桌面访问时，它会保持原始大小。这是页面中唯一的内容。

当人们从手机上访问它时，我想让它适合整个屏幕。怎么样？

<style type="text/css">
    body { background-color: #6BC5C5; }
</style>
<title>Size is being moved to another server</title>
<div style="margin: 0; padding: 0; left: 0; top: 0; border: 0; position: absolute;">
<img src="movedatacenter.jpg" alt="Under Maintenance" width="595" height="1021" align="left"></div>

Answer 1

您要使用的是媒体查询。使用媒体查询，您可以根据屏幕大小强制执行不同的CSS规则。

例如：

@media only screen and (max-width: 600px) {

    img#underconstruction {width: 100%; height: 100%; margin: 0; padding; 0;}
}

如果设备屏幕为600px或更小，那将迫使具有underconstruction id的img达到全宽和高度。 600是一个很好的尺寸，因为较新的iphone的高度高于480.

此外，您需要在具有以下元标记的移动设备上强制视口与1：1的比例：

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">

Answer 2

使用以下内容设置图像的样式：

width: 100%;
height: 100%;
max-width: 800px;
max-height: 600px;

这会将图像的大小扩展到父级，最高可达800x600。确保父元素也是窗口的宽度。

Answer 3

您可以对此

使用CSS媒体查询

@media all and (max-width: 768px) {
/* 768px is usually the width of tablets in portrait orientation */
/* You can use any other size you see fit */

    img {width: 100%;}
}

仅当宽度低于给定max-width时才会应用样式信息。

如何在移动设备上全屏显示图像，而不是在桌面上？

3 个答案: