假设我有一页宽度不同的图片示例:
<img src="#" width="650px">
<img src="#" width="750px">
<img src="#" width="350px">
在调整浏览器大小时,这些会突破容器,所以我必须在 img 上设置 max-width: 100%;
以阻止这种情况发生。
有没有办法让这些图像保留它们不同的尺寸方面? 目前,它们最终都占据了移动浏览器的整个宽度。
最佳答案
max-width
没问题,只需尝试添加 height:auto;
示例:(调整窗口大小以查看效果)
img {
display: block;
max-width: 100%;
height: auto;
}
<img src="https://media-cdn.tripadvisor.com/media/photo-s/0e/9a/e3/1d/freedom-tower.jpg">
<img src="https://media-cdn.tripadvisor.com/media/photo-s/0e/9a/e3/1d/freedom-tower.jpg">
<img src="https://media-cdn.tripadvisor.com/media/photo-s/0e/9a/e3/1d/freedom-tower.jpg">
关于jquery - 阻止图像适合移动设备的屏幕,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45994790/