如何根据屏幕大小更改图像大小？

我想要一个横幅显示在大屏幕（桌面）宽度的50％和小屏幕（iphone）上100％的宽度上。如何根据屏幕大小更改图像大小？

在图像被显示在屏幕上的50％的每个设备的时刻：

.advert-img { 
    width: 50%; 
    height:auto 
}

如何可以改变根据屏幕大小的宽度？

这是所有浏览器都可能的吗？即旧黑莓浏览器

来源

2014-07-02 grabury

用手机来完成，现在具有高像素数，你应该使用的介质标签小心。您可能想尝试使用js来检测这里的移动用户代理http://stackoverflow.com/questions/11381673/javascript-solution-to-detect-mobile-browser – GleasonK

您需要media queries来完成此操作。在你的情况下，CSS是这样的：

.advert-img { 
    width: 50% 
    height: auto; 
} 
@media screen and (max-width: 480px) { 
    .advert-img { 
    width: 100%; 
    } 
}

您可以在以下方面取代480px有什么最适合你的内容的移动断点

来源

2014-07-02 14:13:33 Jnatalzia

相关媒体查询：方向。根据您正在构建的内容，最大宽度/最大高度和方向的组合可以帮助有效地在桌面设备，移动设备和平板电脑上显示信息。 – Curlystraw

您可以使用CSS媒体查询来区分的宽度该设备..比方说，你要区分有480宽度的移动，1024宽度的桌面，你可以这样做下面的代码：

.advert-img { 
    width: 50%; 
    height:auto 
} 
@media only screen and (max-device-width: 480px) { 
    width: 100%; 
}

欲了解更多信息请查看本link

来源

2014-07-02 14:15:07

把你的CSS这个媒体查询：

@media (max-width: 1024) { 
    /* Code here works for mobiles and tablets. */ 
    .advert-img { width: 100%; } 
}

这将在所有相关的浏览器。它将在黑莓4.7.1及更高版本上运行。检查黑莓手机：http://docs.blackberry.com/en/developers/deliverables/11844/BB_Browser_content_support_by_version_438586_11.jsp。

来源

2014-07-02 14:15:49

我想你想要什么，实现可以通过媒体查询对CSS3 http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

来源

2014-07-02 14:16:48

如何根据屏幕大小更改图像大小？

回答

相关问题