我在 Facebook 应用程序中有几张图片。问题是图像很大,无论是从电脑还是手机访问,我都需要它看起来很好。考虑到不同的屏幕尺寸,将其设置为某个固定尺寸显然会使其看起来很糟糕。
那么,我应该如何调整它的大小以使其在任何屏幕上看起来都很好?
问问题
18663 次
3 回答
2
将img
标签上的宽度和高度设置为(其容器的)百分比:
<img src="http://..." alt="" width="50%" height="30%" />
根据您的需要调整百分比。
于 2013-04-04T16:53:54.093 回答
1
使用媒体查询。例如:
@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;
}
}
于 2013-04-04T17:08:03.983 回答
0
试试这个
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;
}
如果可能,另一种选择是使用媒体查询,因此对于不同的浏览器大小,您可以加载不同大小的图像。
这是一个小提琴,看看这是否是您想要实现的目标
于 2013-04-04T17:00:50.810 回答