调整图像大小html / css

Question

我在一个Facebook应用程序中有几个图像。 问题是图像很大，无论是从计算机还是从电话访问，我都需要使其看起来很好。 考虑到不同的屏幕尺寸，将其设置为某个固定尺寸显然会使它看起来很糟糕。
因此，我应该如何调整它的大小以使其在任何屏幕上都能正常显示？

Answer 1

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

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

根据您的需求调整百分比。

Answer 2

使用媒体查询。 例如：

 @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;
  }
}

Answer 3

尝试这个

 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;
 }

如果可能，另一种选择是使用媒体查询，因此对于不同的浏览器大小，您可以加载不同大小的图像。

这是一个小提琴 ，看看这是否是您要实现的目标