图片过大屏幕撑不下解决方法

fury_123

已于 2023-09-04 16:34:43 修改

阅读量348

点赞数

文章标签：前端

于 2023-09-04 16:27:25 首次发布

本文链接：https://blog.csdn.net/kuang_nu/article/details/132672231

版权

本文介绍了如何使用CSS的background-size属性将图片调整至适合屏幕大小，通过设置为contain，确保图片在任何设备上都能保持比例缩放。示例代码展示了如何在HTML中实现这一功能，包括一个居中的输入框和按钮。

摘要由CSDN通过智能技术生成

如果图片过大而无法完全显示在屏幕上，您可以使用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`文件后，在浏览器中打开即可看到效果。这个代码将使图片缩放以适应屏幕，并在图片上方添加了一个居中的输入框和按钮。