最大高度和最大宽度的响应图像

我有这个HTML和CSS

的CSS

.kalim {display: inline-block;}

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

此代码的问题在于，调整浏览器大小时，图像的宽度没有响应。如果设置，width:100%则超过800px的人像图像会失真。

是否有解决方法，以使图像响应并具有max-height和max-width设置？

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

html

的CSS

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

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