html图片如何按屏幕大小等比例缩放
发布网友
发布时间：2022-04-24 06:07
共2个回答
热心网友
时间：2022-05-07 20:15
html图片按屏幕大小等比例缩放若浏览器允许可按Ctrl+鼠标滚轮滑动缩放，或用代码。
具体方法如下：
Ctrl+鼠标滚轮滑动缩放
css代码与htlm代码
CSS 代码如下：
#background
{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
background-color: #211f1f;
display:none\8;
}
#background .bg-photo
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: none;
overflow: hidden;
-webkit-background-size: cover !important;
-moz-background-size: cover !important;
-o-background-size: cover !important;
background-size: cover !important;
}
#background .bg-photo-1
{
background: url('../image/alone.jpg') no-repeat center center;
}
#background-ie {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
background-color: #211f1f;
}
HTML代码如下：
<div id="background">
<div class="bg-photo bg-photo-1" style="display: block;"></div>
</div>
参考资料
html 网页背景图片根据屏幕大小CSS自动缩放.CSDN博客[引用时间2017-12-29]
热心网友
时间：2022-05-07 21:33
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Test</title>
</head>
<body>
<img style="display:block;width:100%;" src="test.png" />
</body>
</html>
********
这样就好了.
主要是那个display:block;width:100%
