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

Question

我想要一个横幅显示超过大屏幕（桌面）宽度的50％，并且在小屏幕（iphone）上显示宽度的100％。

目前，每个设备的图像显示在屏幕的50％以上：

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

如何根据屏幕尺寸改变宽度？

所有浏览器都可以吗？即老黑莓浏览器

Answer 1

您需要media queries才能完成此任务。在你的情况下，css看起来像这样：

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

您可以使用移动断点方面最适合您内容的内容替换480px

Answer 2

您可以使用CSS媒体查询来区分设备的宽度..假设您要区分480宽度的移动设备和1024宽度的桌面，您可以执行以下代码：

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

有关详细信息，请查看此link

Answer 3

将此媒体查询放入CSS：

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

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

Answer 4

我认为你想要实现的目标可以通过使用Media Queries for CSS3来完成 http://css-tricks.com/snippets/css/media-queries-for-standard-devices/