jquery - 阻止图像适合移动设备的屏幕

Question

假设我有一页宽度不同的图片示例:

<img src="#" width="650px">
<img src="#" width="750px">
<img src="#" width="350px">

在调整浏览器大小时，这些会突破容器，所以我必须在 img 上设置 max-width: 100%; 以阻止这种情况发生。

有没有办法让这些图像保留它们不同的尺寸方面？目前，它们最终都占据了移动浏览器的整个宽度。

Answer 1

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">