Question

我在网站上工作时，当试图使该页面上的所有图像响应时，我发现底部图像被压缩了吗？底部的图像在向下滑动时执行动画，但现在被压缩了。反正有解决办法吗？

感谢张爱丹

<!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%;
	
}

Answer 1

在.bottom img {}声明中，将图像的高度设置为100％，在.responsive {}中，将宽度设置为100％（均相对于父容器）。因此，它很容易受到挤压。尝试使用height: auto;而不是100％。但是，如果图像的“自然”高度应该更大（给定图像的宽度和比例），则max-height: 100%中的.responsive实际上将继续挤压图像。因此，删除该行。

OR

使用透明像素图像并将图像设置为背景，并使用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">

图片压缩在页面底部吗？

1 个答案: