Question

调整浏览器大小时，图像保持不变，并且网站看起来很糟糕，因此如何解决它，以便在调整浏览器.banner的大小时图像可以响应

<img class="banner" src="banner.svg" alt="">

.banner {
  max-width: 100%;
  height: auto;
  position: relative;
  flex:none;
  float:right;
  z-index: -1;
  top:-50px;
}

Answer 1

将<img>包裹在<div>内，就像这样（working CodePen）：

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

<div>
  <img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png">
</div>

Answer 2

在您的CSS中，

flex:none;使得图像不会收缩，从而在调整浏览器窗口大小时溢出，请尝试像这样从代码中删除flex:none;

.banner {
  max-width: 100%;
  height: auto;
  position: relative;
  float: right;
  z-index: -1;
  top: -50px;
}

您可以了解有关弹性属性here

的更多信息

Answer 3

由于使用了max-width属性，所以CSS告诉对象最大可以是屏幕宽度的100%。但这也意味着您可以变小。尝试：

.banner {
  min-width: 100%;
  max-width: 100%;
  height: auto;
  position: relative;
  flex:none;
  float:right;
  z-index: -1;
  top:-50px;
}

<img class="banner" src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg" alt="" />

在上面，我添加了min-width: 100%;并保留了max-width: 100%;，因此大小始终为100%。如果您不喜欢，请尝试：

.banner {
  width: 100%;
  height: auto;
  position: relative;
  flex:none;
  float:right;
  z-index: -1;
  top:-50px;
}

<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg" class="banner" alt="" />

在这里，我只添加了width: 100%;并取出了max-width: 100%;，这使得宽度始终是屏幕宽度的100%。这些应该有帮助。

但是，假设您希望宽度为100%，但不希望img小于100px或大于500px：

.banner {
  min-width: 100px;
  width: 100%;
  max-width: 500px;
  height: auto;
  position: relative;
  flex:none;
  float:right;
  z-index: -1;
  top:-50px;
}

<img class="banner" src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg" alt="" />

min-width和max-width属性指定“容器的边缘”或宽度的参数。不是实际的宽度。您可以了解有关这些属性here的更多信息。

我希望这会有所帮助！

Answer 4

尝试width : 100%并删除其他属性，然后再次检查是否有效

调整浏览器窗口大小时，图像保持不变

4 个答案: