HTMLCSS不能使影像對角線適合螢屏-有解無憂

我對 html 和 css 了解不多，我在互聯網上找不到答案，所以我在這里。

問題：我試圖讓影像填充螢屏的頂部，但有一件事阻止了我，它是<body>. 我已經通過使用管理它margin: -10px;但是現在影像無法填充螢屏20px，可能是因為沒有邊距，影像仍然認為螢屏那么大。

HTML CSS 不能使影像對角線適合螢屏

html,body {
    width: 100%;
    height: 100%;
    margin: -10px;
    padding: 0;
    overflow: hidden;
}

img {
    width: 1600px;
     
    height: 300px;
    opacity: 70%;
    object-fit: cover;
    object-position: top 10px;
}

.cont {
    position: relative;
    text-align: center;
    padding: 10px;
}

.main-text {
    font-size: 100px;
    color: white;
    position: absolute;
    top: 100px;
    left: 70px;
}

<body>
    <div class="cont">
        <img src="https://i.stack.imgur.com/DWZAk.jpg">
        <div class="main-text">Big Ass Title</div> 
    </div>
</body>

注意：如果您有任何問題或對該問題有任何不理解，請提出，因為我已準備好任何答案。：）謝謝。

uj5u.com熱心網友回復：

如果您的影像是裝飾（設計），則可以使用背景。

.cont可以是一個flex或grid元素，以避免絕對位置和可能的不必要的副作用。

這是一個帶有背景和網格的示例：

body {
  margin: 0;
  min-height: 100vh; /* optionnal if it does not have a purpose */
}
.cont {
  height: 300px; /* guessed from your code */
  display: grid; /* default make a single column*/
  background: url(https://picsum.photos/id/1015/600/300) 0 0 / cover; /* background covering */
}
.main-text {
  margin-block: auto; /* vertical-centering in its row from here */
  margin-inline-start:70px;
  font-size: 100px; /* from your code */
  color: white; /* from your code */
  font-weight: normal; /* you looked for this? */
  text-shadow: 0 0 1px #000; /*Optionnal  increase readability*/
}

<div class="cont">
        <h1 class="main-text">Big Ass Title</h1><!-- if that's a title, then make it a title ;) -->
    </div>

uj5u.com熱心網友回復：

通常要消除所有邊距和填充，您可以添加：

* {
  margin: 0;
  padding: 0;
}

順便說一句，我附上了一個片段，它按照你的要求作業。消除邊距比添加負邊距更好，如果你想這樣做，你必須在寬度上補償它以達到預期的 100% 寬度。

html,
body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
}

img {
  width: 100%;
  margin: 0;
  height: 300px;
  opacity: 70%;
  object-fit: cover;
}

.cont {
  position: relative;
  text-align: center;
}

.main-text {
  font-size: 100px;
  color: white;
  position: absolute;
  top: 100px;
  left: 70px;
}

<html>

<body>
  <div class="cont">
    <img src="https://images2.alphacoders.com/941/thumb-1920-941898.jpg">
    <div class="main-text">Big Ass Title</div>
  </div>
</body>

</html>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/520182.html

標籤：htmlcss图片

上一篇：使用表單時未顯示Laravel影像

下一篇：將Discord附件轉換為二進制