调整图像大小html/css

Question

我在Facebook应用程序中有几个图像。问题是，图像相当大，我需要它看起来很好，无论是从电脑或手机访问。考虑到不同的屏幕尺寸，将其设置为某个固定维度显然会使其看起来很糟糕。
那么，我应该如何调整它的大小，使它在任何屏幕上看起来都不错？

Answer 1

设置在img标签宽度和高度为百分比（其容器）：

<img src="http://..." alt="" width="50%" height="30%" /> 

调整百分比，以您的需求。

Answer 2

试试这个

img 
{ 
    width:100%;/*adjust this value to your needs*/ 
    max-width: the size of the image;/* so it wont get bigger and pixelated*/ 
    height:auto; 
} 

另一种选择，如果可能的话，就是用媒体查询，所以对于不同尺寸的浏览器，你可以加载图像的不同尺寸。

这里是一个fiddle，看看这是你正在努力实现

Answer 3

使用媒体查询什么。 例如：

@media all and (min-width: 1001px) { 
    img { 
    width: 100%; /* insert prefered value */ 
    height: auto; 
    } 
} 

@media all and (max-width: 1000px) and (min-width: 700px) { 
    img { 
    width: 100%; /* insert preferred value */ 
    height: auto; 
    } 
} 

@media all and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) { 
    img { 
    width: 100%; /* insert preferred value */ 
    height: auto; 
    } 
}