html - 响应式设计 - 如何使图像在小屏幕上看起来正常？

Question

我正在这个测试页面上工作：http: //problemio.com/index_test.php

在我的笔记本电脑屏幕上看起来不错。但在我的手机浏览器上看起来很糟糕。尤其是图像看起来一团糟。

可以做些什么来确保图像看起来不错？

谢谢，亚历克斯

score 3 · Accepted Answer

Omega有正确的想法，但您也想设置width参数。我通常将其设置width为百分比值和max-width像素值。这样，一旦它超过了最大宽度，它基本上把它扔到一边，只看宽度。与此类似的东西

img {
  max-width:500px; /*Once screen size is smaller than 500px, the image reverts to the width value*/
  width:100%;
}

score 2 · Accepted Answer

使用媒体查询为移动设备设置元素样式。图像也使用百分比以及最大宽度和最小宽度值。

@media screen and (max-width:480px) {
    //CSS sizes for mobiles only
}

score 1 · Accepted Answer

不要为您的图像设置像素错误，而是将此 css 用于 img 标签：

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

3 回答 3