图像在 css 上没有正确调整大小答案

【问题标题】：Image not resizing correctly on css图像在 css 上没有正确调整大小
【发布时间】：2021-11-05 01:41:29
【问题描述】：

我正在尝试在我的浏览器窗口上显示图像，因此无论我如何调整它的大小、更改高度或宽度，我都可以始终完整地看到图像。现在我的css是这样的：

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

并且宽度会正确更改，但是如果图像太高，则会出现滚动并且我无法完全看到图像。有什么方法可以正确显示吗？这是html：

<div>
  <img src={{imagenActual}} >
</div>

提前非常感谢

【问题讨论】：

标签： javascript html css

【解决方案1】：

如果您可以在 CSS 中设置图片 URL，您可以尝试以下解决方案。

这将根据浏览器窗口的当前高度自动调整图像大小，尝试使用“高度”值”。

HTML：

<div>
</div>

CSS：

div {
  height: 80vh;
  background-image: url('https://wallpaperaccess.com/full/2813579.jpg');
  background-repeat: no-repeat;
  background-size: contain;
}

【讨论】：

【解决方案2】：

您可以像使用 max-width 一样使用max-height 来定义不应超过的图像最大高度的值。

使用vh，您可以在视图高度中指定单位，而不是使用%

Refer here

.imageDiv{
  width: 80vw;
  height: 80vh;
}
img {
  max-width: 100%;
  max-height: 90vh;
}

<div class="imageDiv">
  <img src="https://www.industrialempathy.com/img/remote/ZiClJf-1920w.jpg" >
</div>

【讨论】：

【解决方案3】：

我建议将图像设置为 css 中的背景。这将允许您使用 background-size 属性。

// html
<div class="cover-image" style="background-image: url({{imagenActual}});">
  
</div>

// css
.cover-image {
  max-width: 100%;
  height: auto;
  background-size: contain;
  background-repeat: no-repeat;
}

【讨论】：