我正在嘗試制作不和諧網站的克隆。而且我在英雄部分的影像方面遇到了很多問題。請看看我附上的動圖。（縮小時請注意英雄部分背景影像。）
- Discord 網站縮小
- 我的嘗試
請注意，在我的嘗試中，我打開了
left: 50%影像的 css 屬性。這是一個很大的影像，所以left: 50它出現在 Discord 網站中的位置。
問題->正如您所注意到的那樣，discord 網站中的影像仍然位于中心，并且您基本上只是在縮小時看到越來越多的影像。但是在我的克隆中，當放大時它從左側縮小。請看一下下面的代碼。
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.hero {
width: 100%;
height: 92vh;
background-color: #404eed;
}
.image_container {
position: relative;
height: 100%;
overflow: hidden;
}
img {
position: absolute;
bottom: 0;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="hero">
<div class="image_container">
<img src="https://i.imgur.com/FjoxNjB.png" alt="img1">
</div>
</div>
</body>
</html>（事實上?? ，您在“我的嘗試”中看到的影像是一個 svg，但是在這里我添加了一個 png（來自 Imgur）。不知道此資訊是否有幫助，但它是一個 svg。）
有人可以幫我解決這個問題嗎，我真的很想解決這個問題，但是沒能成功，非常感謝任何幫助。謝謝你。
uj5u.com熱心網友回復：
定位時可以通過 CSS和屬性img水平居中。lefttranslateXabsolute
left可以調整和的值，translateX使其匹配所需的結果。
例子：
img {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
希望它有所幫助！
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/535319.html
標籤：网页格式CSS图片
上一篇：使用正則運算式從字串中提取鍵值對