最大高度&的响应式图像最大宽度 [英] Responsive Image with Max-height & Max-width

问题描述

我有这个html和CSS

I have this html and 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的人像图像会失真.

The problem with this code is that the images are not responsive in width when the browser is resized. If I set width:100% then the portrait images exceeding 800px in height become distorted.

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

Is there a workaround for this, to make the image responsive and also have the max-height and max-width settings?

推荐答案

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

You should add the width restriction to the outer element instead of the image. The outer element will not size over your max-width and max-height, but the image will always be 100% in width. This way your image will be responsive.

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;}

这篇关于最大高度&的响应式图像最大宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！