具有最大高度和最大宽度的响应式图像

我有这个 html 和 CSS

<div class="kalim"><img  src=""></div>

CSS

.kalim {display: inline-block;}

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

此代码的问题是，当浏览器调整大小时，图像的宽度不响应。如果我设置width:100%那么高度超过800px的人像图像就会变得扭曲。

是否有解决方法，使图像响应并具有最大高度和最大宽度设置？

您应该将宽度限制添加到外部元素而不是图像。外部元素的大小不会超过最大宽度和最大高度，但图像的宽度将始终为 100%。这样您的图像就会具有响应能力。

html

 <div class="kalim"><img src=""></div>

css

.kalim {display: inline-block; max-width: 800px; max-height: 800px;}

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