Question

假设我有一页宽度不同的图片：

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

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

有没有办法可以让这些图像保留不同大小的方面？目前他们最终都是移动浏览器的全宽。

Answer 1

height:auto;没问题，只需尝试添加img { display: block; max-width: 100%; height: auto; }

示例:(调整窗口大小以查看效果）

＆＃13;

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

＆＃13;

{{1}}

＆＃13;

Answer 2

将height: auto;添加到图片css

div {
  width: 50%;
}

img {
  max-width: 100%;
  height: auto;
}

<div>
  <img src="https://static.wixstatic.com/media/a9ff3b_1eec973ae9eb43f4bca9876e5d90f6fa.jpg">
</div>

Answer 3

你需要更多的CSS，如果我目前正在使用移动人像模式，你可以获得所有图像的全宽，但在风景上都应该有不同的尺寸。

在纵向模式下，平均屏幕宽度约为320像素，但所有图像都超过320像素。

所以我建议你使用类似“.large”“。medium”和“.small”这样的图片，并使用媒体查询移动/小屏幕来显示不同的宽度。

在移动设备上停止适合屏幕的图像

3 个答案: