我在我的网站上工作，当我试图让那里的所有图片都响应时，我发现底部的图片被压扁了？底部图像在向下滑动但现在被压扁的地方做了一个动画。有办法解决吗？
谢谢张爱丹
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>aidancheung.com</title>
</head>
<link href="file:///C|/Users/User/Downloads/aidancheung.css" rel="stylesheet" type="text/css">
<style>
h1 {
font-family: coolvetica;
text-align: center;
}
</style>
<img src="Website.png" alt="Top Building" class="responsive">
<h1 style="line-height:3vw;font-size: 8vw;">aidancheung.<br><i style="font-size: 4vw">portfolio</i></br></h1>
<div class="bottom">
<a href="aidancheung.htm" class="button centered">home</a>
<img src="bottom.png" alt="Bottom Building" class="responsive">
</div>
</html>.bottom {
position: relative;
padding: 40px;
overflow: hidden;
}
.bottom img {
height: 100%;
position: absolute;
left: 0;
top: 0;
transition: top 2s ease-out;
}
.bottom:hover img {
top: 100%;
}
.button {
display: block;
width: 9em;
height: 0.25em;
background-color: black;
text-align: center;
color: white;
font-family: coolvetica;
font-size: 30px;
border-top: 0.05em solid black;
border-right: 0.5em solid black;
border-bottom: 1em solid black;
border-left: 0.5em solid black;
}
.responsive {
width: 100%;
max-height: 100%;
}最佳答案
在您的 .bottom img {} 声明中，您将图像的高度设置为 100%，在 .responsive {} 中，您将宽度设置为 100%(两者相对于父容器)。所以它很容易被挤压。尝试 height: auto; 而不是 100%。但是，如果图像的“自然”高度应该更大(给定图像和比例)。所以删除那行。
或
使用透明像素图像并将图像设置为背景并使用 background-size: cover 让它填充容器。在这种情况下，您应该将图像的宽度和高度设置为 100% 以填充父级。
CSS
.responsive {
width: 100%;
height: 100%;
background-image: url(bottom.png);
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
HTML
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Bottom Building" class="responsive">
关于html - 页面底部的图片被压扁了？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53027631/