停止图像屏幕上移动

比方说，我有一个都不同宽度的示例图像的页面：停止图像屏幕上移动

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

在浏览器的缩放，这些都会打出来的容器，所以我必须在img上设置max-width: 100%;以阻止这种情况的发生。

有没有一种方法可以让这些图像保留其不同的尺寸？目前他们最终成为移动浏览器的全部宽度。

来源

2017-09-01 tbar

告诉我们你结束了什么...这应该是完美的。 – Salketer

的max-width是好的，只是尝试OT还添加了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">

来源

2017-09-01 07:00:31

我可以在你的例子中看到这个工作非常好，但是当我测试它时，它不起作用。奇怪的是，谢谢你的回答，我很高兴我不会以错误的方式解决问题，我会试着弄清楚是什么原因导致它不能这样做。 – tbar

如果代码在'img'上设置，则不检查检查元素。 –

添加height: auto;到图像的CSS

div { 
 
    width: 50%; 
 
} 
 

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

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

来源

2017-09-01 07:04:05 felixmosh

你需要更多的CSS这里，如果我目前正在使用移动肖像模式，你会得到所有具有完整宽度的图像，但在风景上都应该有不同的大小。

在纵向模式下，平均屏幕宽度为大约320像素，但所有图像多于320像素。

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

来源

2017-09-01 07:37:37

停止图像屏幕上移动

回答

相关问题