Question

我想知道如何根据设备的屏幕尺寸自动调整图像大小。

我的图片太大，使我的网页随之扩展...

.gris {
  height: 100%;
  left: 20%;
  opacity: 0;
  position: absolute;
  top: 0;
  transition-duration: 0.2s;
  width: 100%;
  z-index: -10;
}

<div class="gris">
  <img src="https://pngimage.net/wp-content/uploads/2018/06/image-noir-png.png">
</div>

Answer 1

您需要这个：

.gris img {
  width: 100%;
  height: auto;
}

这将填满宽度，并保持宽高比。但是请确保不要放置小图像，因为在这种情况下，它会放大（放大）。在这种情况下，您可能需要这样做：

.gris img {
  max-width: 100%;
  height: auto;
}

不要设置宽度！

Answer 2

您是否尝试过针对img本身？另外，您有一个position: absolute和left: 20%，以便在调整大小时可以通过它。

.gris img {
  width: 100%;
}

Answer 3

*{
margin:0;
box-sizing:border-box;
}
.gris {
  height: 100vh;
  width: 100%;
  opacity: 1;
  transition-duration: 0.2s;
  
}
.gris img{
 height:100%;
 width:100%;
 object-fit: cover;
}

<div class="gris">
  <img src="https://pngimage.net/wp-content/uploads/2018/06/image-noir-png.png">
</div>

调整图像大小以适合屏幕

3 个答案: