求一个首页 html 代码, 只放一个图片可以兼容适配市面上大部分手机/屏幕浏览器尺寸的

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

由于官网没时间做, 特求一个 Html 代码临时对付放张高清图片可以适配市面上大部分手机/PC 屏幕浏览器尺寸的. 有人会问为什么不谷歌, 其实已经谷歌过了, 乱七八糟的太多了, 不如这里更直接专业.

4 条回复 • 2024-05-04 06:35:10 +08:00

zictos

14 天前

<!DOCTYPE html>
<html lang="zh">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>Image</title>

<style>
body {
background-color: #fdfcf8;
margin: 0 auto;
max-width: 1024px;
}

#main {
display: flex;
justify-content: center;
align-items: center;
background-color: white;
padding: 25px;
}

img {
max-width: 100%;
}

@media screen and (max-width: 760px) {
#main {
padding: 5px;
}
}
</style>

</head>

<body>
<div id="main">
<p><img src="https://img10.360buyimg.com/imgzone/jfs/t1/228236/14/15858/52860/662b334bFe7dd93f0/79959161ec860c49.png" alt=""></p>
</div>

</body>

</html>

old9

14 天前 via Android

serafin

13 天前

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>serafin</title>
<style>
body {
background-color: #292929;
}

img {
border: none;
display: block;
margin: auto;
max-width: 100%;
max-height: 100%;
}
</style>
</head>
<body>
<img src="s.png">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$(window).on('resize', function() {
$('body').height($(window).height());
}).trigger('resize');
});
</script>
</body>
</html>

serafin

13 天前

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>serafin</title>
<style>
body {
background-color: #292929;
margin: 0;
padding: 0;
}

img {
border: none;
display: block;
margin: auto;
max-width: 100%;
max-height: 100%;
}
</style>
</head>
<body>
<img src="s.png">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$(window).on('resize', function() {
$('body').height($(window).height());
}).trigger('resize');
});
</script>
</body>
</html>