限制 img 的大小，同时仍然响应

Question

我想要响应式图像，同时限制它们的最大宽度或高度，并保持它们的比例。到目前为止，我只完成了其中的 2/3，每次这些条件之一未满足时。

我正在使用 markdown，因此在我的 ![img] 标签周围添加一个 div class 不起作用：当我构建我的代码时，它不会渲染图像，我可以看到我的 ![img](https://...代码

到目前为止我尝试了什么

img {
  max-height:800px;
  max-width:800px;
  height:auto;
  width:auto;
}

保持比例并限制大小但不响应

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

反应灵敏并限制大小但不保持比例正常（宽度始终最大为 800 像素）

如果我什么都不做，它会保持比例并且反应灵敏，但图片太大

感谢您的帮助

Answer 1

将图像放入 div 并 max-height 或 max-width 用于 div 并应用 overflow-hidden。或者您可以将图像添加为 background-image 并将 max-height/width 设置为元素。例如：

.pic{
  max-height:15rem;
  overflow:hidden;
  display:flex;
  align-items:center;
}
img{
  width:100%;
}

<div class="pic"><img src="https://aisvip-a.akamaihd.net/masters/1030161/3200x1800/selena-gomez-mit-diesem-foto-knackt-sie-beyonces-instagram-rekord.jpg" alt=""></div>

Answer 2

也许这行得通？

img {
    max-height: 800px;
    width: 100%;
    max-width: 800px;
    object-fit: contain;
}

限制 img 的大小，同时仍然响应

limit size of img while still responsive

html

css

markdown