我有这个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;}
像img-responsive或img-fluid bs4的bootstrap class css
<img src="chicago.jpg" style="max-width: 100%; height: auto; width: 800px"/>