如果图片过大而无法完全显示在屏幕上，您可以使用CSS的`background-size`属性将其调整为合适的大小，以适应屏幕。具体来说，您可以将`background-size`设置为`contain`，这将缩放图像以适应容器。
以下是修改后的示例代码：
<!DOCTYPE html>
<html>
<head>
<style>
body, html {
height: 100%;
margin: 0;
}
.container {
position: relative;
width: 100%;
height: 100%;
background-image: url('img.jpg');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.overlay {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.overlay input[type="text"], .overlay button {
padding: 10px;
font-size: 14px;
}
.overlay button {
margin-top: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="overlay">
<input type="text" placeholder="输入框">
<button>按钮</button>
</div>
</div>
</body>
</html>
将您的图片的URL替换掉`background-image: url('img.jpg');`中的`img.jpg`，然后将以上代码保存为`.html`文件后，在浏览器中打开即可看到效果。这个代码将使图片缩放以适应屏幕，并在图片上方添加了一个居中的输入框和按钮。图片过大屏幕撑不下解决方法
猜你喜欢
转载自blog.csdn.net/kuang_nu/article/details/132672231
今日推荐
周排行