时间戳

首页 > 解决方案 > 图像左侧有额外的空白区域。任何事情都有帮助

html - 图像左侧有额外的空白区域。任何事情都有帮助

问题描述

我无法摆脱的图像左侧有这个不可见的空白区域。我已经尝试了很多东西，甚至是下面的代码。我希望图像能够覆盖整个屏幕，周围没有任何空白。

html, style, body{
  margin:0;
  padding: 0; 
}

而且，如果有人可以提供帮助，仍然没有结果。这将非常有帮助。

<html>
<head>
<style>

<link href="https://fonts.googleapis.com/css?family=Concert+One|Oswald&display=swap" rel="stylesheet">  

.container {
  position: relative;
  text-align: center;
}
  /* TEXT SETTINGS*/
.text {
  position: absolute ;
  top: 15%; 
  left: 40%; 
  transform: translate(-30%, -50%);
  color: white; 
  font-size: 100px;
  text-size-adjust: auto; 
  font-family: 'Oswald', sans-serif;

}

.text2 {
  position: absolute ;
  top: 40%;
  left: 10%;  
  transform: translate(0%, -50%); 
  color: black;
  font-size:90px;
  text-size-adjust: auto;
  font-family: 'Concert One', cursive;

}

.text3 {
  position: absolute ;
  top: 70%;
  left: 10%;
  transform: translate(5%, -50%);
  color: white;
  font-size: 80px;
  text-size-adjust: auto; 
  font-family: 'Concert One', cursive;

}

html, style, body{
  margin:0;
  padding: 0; 
}

</style>  
</head>
<body>

    <div class="container" >
    <img src="https://images.unsplash.com/photo-1495741738915-f877fcd5f5f7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2550&q=80;" alt="Rocky Mountains"margin="0" padding="0" width="1360px" height="800px">
  <div class="text" >TEXT</div>
  <div class="text2" ><strong>TEXT</strong></div>
  <div class="text3" >TEXT</div>
  </div>
</body>
</html>

标签： html

解决方案

试试这个代码：

body *{
    box-sizing:border-box;
}

推荐阅读