我有这个 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;}
关于html - 具有最大高度和最大宽度的响应图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50193946/